I got Error: reCaptcha has not been loaded yet. when using google's angular-recaptcha package.
the index.html is as following, and it display fine to show recaptcha and a button to call login function in controller. and recaptcha works fine as well.
<div vc-recaptcha class="g-recaptcha" data-sitekey="key"></div>
<div ng-click="lc.login()">submit</div>
app.js is as
(function () {
'use strict';
angular
.module('loginService', [
'vcRecaptcha'
]);
})();
controller is as following, and the error is from here. it looks like I did not inject recaptcha module right.
(function () {
'use strict';
angular
.module('loginService.login.controllers')
.controller('LoginController',
['$scope',
'vcRecaptchaService',
function ($scope, vcRecaptchaService) {
var lc = this;
...
...
function login() {
if(vcRecaptchaService.getResponse() === "") // error is from here
{...}
}]);
It looks that I do not inject recaptcha package in the right way. any one can help?
Have you loaded the library the following way?
<script src="//www.google.com/recaptcha/api.js?render=explicit&onload=vcRecaptchaApiLoaded" async defer></script>
<script src="./angular-recaptcha.js"></script>
<script>
var app = angular.module('loginService', ['vcRecaptcha']);
// code
</script>
Take a look at the example and the documentation:
https://github.com/VividCortex/angular-recaptcha/blob/master/demo/usage.html
https://github.com/VividCortex/angular-recaptcha
Add the loginService to the loginService.login.controllers
angular.module('loginService.login.controllers', ["loginService"])
Related
I have an angularJS app with three modules: myApp(parent/core module), services(contains all the factories and services), and controllers(contains all the controllers).
This is my app.js file
angular.module('services', []);
angular.module('controllers', []);
var app = angular.module('myApp', ['services', 'controllers']);
I read here that setting up my modules and defining dependencies in this way will allow each of my modules to access the other without having to inject the dependencies.
Here's my index.html file
<script src="/js/app.js"></script>
<script src="/js/services/testFactory.js"></script>
<script src="/js/controllers/testCtrl.js"></script>
testFactory.js file
angular.module('services').factory('testFactory', ['$rootScope', 'apiCall', function($rootScope, apiCall){
let testFactory = {};
testFactory.testFunc = function(){
console.log('testFactory.testFunc called');
}
return testFactory;
}])
testCtrl.js file
angular.module('controllers').controller('testCtrl', ['$scope', 'testFactory', function($scope, testFactory){
console.log("inside testCtrl");
$scope.testing = function(){
console.log("testing function called");
testFactory.testFunc();
}
}])
When I call the testFactory.testFunc inside the myApp module, it functions correctly. But, when I try calling it in the controller module, I'm getting the following error
TypeError: Cannot read property 'testFunc' of undefined
I even tried injecting the service module inside the controller module as a dependency, but I still got the same error.
How do I get the service module to work inside the controller module?
I use angularjs 1.2 in my project.
Here is module and controller:
(function () {
"use strict";
angular.module('dashboard', ['ngRoute', 'layersProperty'])
.controller('dashboardController',
function ($scope) {
//never fire!
var self = this;
$scope.data = "bbbbb";
})
})();
here is view:
<div ng-app="dashboard" data-role="page" id="layersProperty" data-add-back-btn="true" style="background-color:red">
<div ng-controller="dashboardController">
{{data}}
</div>
</div>
But the problem is that controller is never fire!Any idea why controller is never fire?
Make sure that when you inject ngRoute and layersProperty then you have both of this JavaScript files included before your controller file where you have dashboardController controller. This is because, Angular will throw you [$injector:modulerr] error if you haven't included those code before your controller file for dashboardController as dashboardController is dependent on ngRoute and layersProperty.
In your above code if you remove ['ngRoute', 'layersProperty'] and replace it with [] then your conrtroller will invoke. So there must be some problem where angular could not find ngRoute and layersProperty service files.
Check if you have reference to angularjs in your main html.
I am working Camunda (v7.3.0) for the first time, which uses angular 1.2.16. I am having an issue with the main app module config not firing when the module is loaded. Example:
angular.module('app', []).config(function () {
console.log("inside app config");
})
When the Camunda form is loaded the above module config function is not fired. Example of index.html
<html>
<script src="/my-warfile-process-0.0.1-SNAPSHOT/forms/app.module.js"></script>
<script src="/my-warfile-process-0.0.1-SNAPSHOT/forms/main.controller.js"></script>
<body>
<form ng-app="app" role="form" name="MyCamProcess">
</form>
</body>
When the form is loaded, the app module seems to be only partially bootstrapped if that makes since. angular.module('app') does exist when you run that command in the Chrome console, still the app config is not fired.
The other issues I am having is that, 1) I only define controllers as a separate function ex.
(function () {
angular.module('app').controller("myController", MyController);
var MyController = function ($scope) {
/**
* do controller stuff
*/
};
})();
Not sure if this is angular 1.2.16 thing, I've not work with this version before. 2) I can't inject services or factories in to the controller ex blow
(function () {
angular.module('app').controller("myController", MyController);
angular.module('app').factory("myFactory", MyFactory);
var MyController = function ($scope, MyFactory) {
/**
* do controller stuff
*/
};
var MyFactory = function () {
/**
* do factory stuff
*/
};
})();
The above give me the error throws the dependency error on the injection into the controller.
Another is that the camForm object, it seems that the only way to access to is to embed a script tag in the form tag and either manually inject the object of throw it on the windows object ex.
<form ng-app="app" role="form" name="MyCamProcess">
<script cam-script type="text/form-script">
//add to window object
window.camForm = camForm;
//inject manually
inject(function () {
MyController(camForm);
})
</script>
</form>
Not sure the inject method works, but it does lol. Any help with this would be most helpful :)
UPDATE:
So, I noticed that the controller and services/factories are being added to the invokedQueue, but not actually being invoked:
If you noticed in the image above the invokeQueue has 4 elements, 3 being controllers and 1 being a service. If you look at the controller array the length is 0. Not sure why this is happening.......
I am trying to create a login page and I have the html looking how I want it so now I am trying to create a controller but for some reason the js controller isnt working with the html. here is the plunker. The {{name}} data bind should display world but it isnt. Here is the controller:
(function() {
"use strict";
var app = angular.module('plunker', []);
app.controller('LoginController', function($scope) {
$scope.name = 'World';
});
})();
http://plnkr.co/edit/mqc6ksw1xo7NMhj74Noa?p=preview
The issue is your angularjs link is not working , just replace with this,
<script data-require="angular.js#*" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
Working code
You have the wrong link so it can't load angular, change
https://code.angularjs.org/2.0.0-alpha.31/angular.js
to
https://code.angularjs.org/2.0.0-alpha.31/angular2.js
note the extra '2' at the end
In My angular JS application i have 2 pages using same functionality and i am trying to use abstract controller and i am getting 'Base Ctrl is not defined' error from Summary Ctrl.
am I missing anything...
Markup
<div ng-controller="MainCtrl">
<div ng-controller="SummaryCtrl">{{name}}</div>
<div ng-controller="SearchCtrl"></div>
</div>
MaintCtrl.js
define(['tabs/module'], function (module) {
'use strict';
module.controller('MainCtrl', ['$scope', function ($scope) {
//some code;
}]);
function BaseCtrl($scope) {
$scope.name="test";
}
});
SummaryCtrl.js
define(['tabs/summary/module'], function (module) {
'use strict';
module.controller('SummaryCtrl', ['$scope', function ($scope) {
BaseCtrl($scope);
//child actions`enter code here`
$scope.name = 'Clicked from base controller';
}]);
});
It looks to me like you're using this code as your example:
Angular: Extending controller
I'm still not 100% sure what your problem is, but it seems to me like it could be that in this sample you've supplied, both the code pieces are in the same file. When you do separate it into separate files, make sure when you bootstrap or add your *.js file references.. make sure you add base before the others that are 'dependent' on it
EG
<script language="javascript" src="someUrl/BaseCtrl.js"></script>
<script language="javascript" src="someUrl/SummaryCtrl.js"></script>
EDIT:
Your issue could be with RequirejJS
Have a look at
http://solutionoptimist.com/2013/09/30/requirejs-angularjs-dependency-injection/
Your MainModule is registered in 'tabs/module', but nowhere are you supplying SummaryCtrl any of its dependencies.
EG. SummaryCtrl is not implicitly aware of 'tabs/module', as it's in 'tabs/summary/module'
Try adding this to summary:
define(['tabs/summary/module', 'tabs/module'], function (module, BaseCtrl) {
'use strict';
module.controller('SummaryCtrl', ['$scope', function ($scope) {
BaseCtrl($scope);
//child actions`enter code here`
$scope.name = 'Clicked from base controller';
}]);
});