i'm looking for a way to use a global varable in a angularjs function.
I found this way, to use the global var as a angular var:
var AppSettings = angular.module('settingsApp', []);
AppSettings.controller('settingsCtrl', ['$scope', '$window', function($scope, $window) {
$scope.sessionUID = $window.sessionUID;
/** function to update user details after edit from list of user php **/
$scope.changefunction = function() {
alert("perfect");
};
}]);
var MyApp = angular.module('biqs_settings_app', ['settingsApp']);
But now I cant run the "changefunction".
Error:
TypeError: Cannot read property '0' of null
at $parseFunctionCall (angular.js:12346)
at callback (angular.js:21435)
at Scope.$eval (angular.js:14401)
at Scope.$apply (angular.js:14500)
at HTMLButtonElement.<anonymous> (angular.js:21440)
at HTMLButtonElement.eventHandler (angular.js:3014)
What am i doing wrong?
Everything will work, if you properly use the settingsCtrl controller in your HTML:
<div ng-app="biqs_settings_app" ng-controller="settingsCtrl">
<button ng-click="changefunction()">Test</button>
</div>
Related
Using Angularjs 1.6.3, I have a controller like this:
'use strict';
var ngnControllers = angular.module('ngnControllers');
ngnControllers.controller('TestCtrl', ['$scope', '$location', '$http',
function TestCtrl($scope, $location, $http) {
console.log("Before defining $scope.play()");
$scope.play() = function() {
};
console.log("After defining $scope.play()");
}
]);
I copied the $scope.play() function from another controller where it was having the same effect:
When it is not commented out, I get a message saying that the controller is not registered, but that's all. When it is commented out everything works fine.
I am at a loss. Any ideas?
Because your function declaration syntax is wrong and as a result is throwing an error. The error gets caught internally and simply causes the controller registration to fail
Change:
$scope.play() = function() {
To
$scope.play = function() {
You should have empty dependencies added to your module,
var ngnControllers = angular.module('ngnControllers',[]);
I am trying to access a parent scope, but I am getting the error that the scope is undefined.
MyApp.controller('AdminController', function ($scope, $http, $filter, $mdDialog, $window, $location, $mdToast) {
$scope.test = "Test";
}).
controller('ToastCtrl', function($scope, $mdToast, $mdDialog) {
$scope.openMoreInfo = function(e) {
if ( isDlgOpen ) return;
isDlgOpen = true;
$mdDialog
.show($mdDialog
.alert()
.title($scope.$parent.test)
.targetEvent(e)
)
.then(function() {
isDlgOpen = false;
})
};
});
Any suggestion, why I am getting this error.
Thank you in advance.
The problem you are not able to access the value is there is no parent-child relationship between your controllers.
You can access it multiple ways:
Either using a service to communicate between controllers.
Using emit/broadcast to communicate
Use $rootscope, but its not recommended.
You should have posted also your view here (at least), but I assume in your html you have something like this
<div ng-controller="AdminController">
<div ng-controller="ToastCtrl">
<!-- openMoreInfo called somewhere here -->
</div>
</div>
And you what your controller to look for $scope.test variable in parent scope. You can just try to use angularjs scope inheritance this way
In parent controller change $scope.test = "Test"; with
$scope.Data = {};
$scope.Data.test = "Test";
Then in your child controller use .title($scope.Data.test).
The child controller will try to access $scope.Data object but it doesn't exist in current scope, so it will try to search for it in $parent scope where it can be found.
I am not using scope outside of the controller so I am confused why I keep getting the error:
Uncaught ReferenceError: $scope is not defined
It is from line 5 which is the "pollApp.controller" line.
(app.js)
var pollApp = angular.module('myApp', ['ui.router']);
pollApp.controller('choiceCtrl', [$scope, function ($scope) {
$scope.choices = [{body: "test"}]; //just for testing
$scope.addChoice = function () {
//add new choice
if ($scope.choiceBody) {
$scope.choices.push({
body: $scope.choiceBody
});
$scope.choiceBody = null;
}
}
}]);
I also checked that Angular is loading fine. Any help would be awesome. Thanks.
While asking for dependency using in DI array annotation, you need to wrap it a quotes like '$scope' inside array and then you could have instance of those dependency inside factory function on controller like $scope
pollApp.controller('choiceCtrl', ['$scope', function ($scope) {
pollApp.controller('choiceCtrl', ['$scope',
missing quotes
I'm trying to compile one of our angular & openLayers project but I'm not able to use Angular.
I've put the angular external parameter, but after compiling i get this error :
Error: [$injector:unpr] Unknown provider: aProvider <- a <- myCtrl
http://errors.angularjs.org/1.3.15/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-%20myCtrl
at REGEX_STRING_REGEXP (angular.js:63)
at angular.js:4015
at Object.getService [as get] (angular.js:4162)
at angular.js:4020
at getService (angular.js:4162)
at Object.invoke (angular.js:4194)
at $get.extend.instance (angular.js:8493)
at angular.js:7739
at forEach (angular.js:331)
at nodeLinkFn (angular.js:7738)
Here's a simple example to illustrate my problem:
html:
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script src="angular/angular.js"></script>
<script src="vmap.js"></script>
script:
goog.provide("vmap");
vmap = function(){
};
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
To compile the files, I use the command below :
python closure-library/closure/bin/build/closurebuilder.py
--root=closure-library/
--root=../debug/
--namespace="vmap"
--output_mode=compiled
--compiler_jar=compiler.jar
--compiler_flags="
--compilation_level=ADVANCED_OPTIMIZATIONS"
--compiler_flags="--externs=../debug/lib/angular/angular-1.3.js"
--compiler_flags="--angular_pass" > ../vmap.js
I've found the angular-1.3.js file here
What did I miss ?
Add #ngInject in jsdocs of the controller constructor function,
Pass in the function as an argument to angular module app.controller('myCtrl', fn)
Make sure to pass in --angular_pass argument to the closure compiler.
So, here is a modified version of the provided example that should work for you:
goog.provide("vmap");
/**
* #constructor
* #ngInject
*/
vmap = function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
};
var app = angular.module('myApp', []);
app.controller('myCtrl', vmap);
Write you controller using the array notation:
app.controller('myCtrl', ['$scope', function($scope) {
$scope['firstName'] = "John";
$scope['lastName'] = "Doe";
}]);
As local variables (like $scope) get renamed, and object properties ($scope.firstName) too, unless you write them using the string notation.
More information about minification in AngularJS here: https://docs.angularjs.org/tutorial/step_05#a-note-on-minification
I have an d angular django app where i am using a span to call a custom made filter from my javascript. This is my html span:
<span class="badge badge-success" ng-bind="mpttdetails | filter:{category.id:{{node.id}}} | sumCompletedCredits"></span>
This is how i defined my filter:
app.filter('sumCompletedCredits', function () {
return function (mpttdetails) {
var sum = 0;
mpttdetails.forEach(function (detail) {
sum += detail.student_academic_credit.credit;
});
return sum;
};
});
This filter is working well and gives the desired results. But when i check the console it is throwing me an error as follows:
TypeError: Cannot call method 'forEach' of undefined
at Scope.<anonymous> (http://127.0.0.1:8000/static/js/app.js:116:23)
at fnInvoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:10011:21)
at OPERATORS.| (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:9526:59)
at extend.constant (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:9956:14)
at Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:11949:28)
at Object.watchExpression (<anonymous>:763:37)
at Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:11794:40)
at Scope.$delegate.__proto__.$digest (<anonymous>:844:31)
at Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:12055:24)
at Scope.$delegate.__proto__.$apply (<anonymous>:855:30) angular.js:9413
(anonymous function) angular.js:9413
(anonymous function) angular.js:6832
Scope.$digest angular.js:11821
$delegate.__proto__.$digest VM1409:844
Scope.$apply angular.js:12055
$delegate.__proto__.$apply VM1409:855
done angular.js:7837
completeRequest angular.js:8020
xhr.onreadystatechange
EDIT:
This is how i get my mpttdetails from a service:
app.controller('mycontroller', function(MpttService, $scope, $modal, $log, $http) {
MpttService.getMptt(function(data){
$scope.mpttdetails = data;
console.log(data);
});
What might be happening?
Most probably you are loading value of mpttdetails. So at first call of filter it is undefined.
Add check for undefined in your filter implementation.
as #bekite mentioned, rather than checking if $scope.mpttdetails is undefined simply put $scope.mpttdetails = [] inside your controller, this way forEach will see an empty list rather than an undefined variable.