<select name="Connection" class="mdl-button" id="dropConnection" onchange="connectionChange()" ></select>
The contents are added automatically from JSON response.Thats working fine.
function connectionChange()
{
var sel = document.getElementById("dropConnection");
var connectionName = sel.options[sel.selectedIndex].text;
$scope.connectionDetail = response.data.message.connectionDetailses.filter(det => det.connectionId === connectionName);
console.log($scope.connectionDetail);
}
after running the page,when I change the dropdown content its showing error
home.html:265 Uncaught ReferenceError: $scope is not defined
at connectionChange (home.html:265) // above javascript code.
at HTMLSelectElement.onchange (VM4122 home.html:139)
home.html:265 Uncaught ReferenceError: $scope is not defined
at connectionChange (home.html:265) // above javascript code.
at HTMLSelectElement.onchange (VM4122 home.html:139)
Looking at this error it can be inferred that you have not injected $scope in your controller. Inject $scope in your controller and it will resolve this error.
Check the link here for knowing how to create a controller in AngularJS properly AngularJS controller
Related
I'm currently creating a game with Javascript and HTML using an MVC design pattern. However, when uploading to the cafe I'm using, I keep getting an error that my View.js class is not being defined in the Controller.js class. However, as by the snippet of code below, you can see that it is:
"use strict";
var model = new Model(),
view = new View(),
controller = null;
function Controller(){
this.init = function(){
view.playGame();
}
}
I also have included the relevant javascript classes within script tags on the single html sheet I'm using. The error message I get in the Chrome debugger is "Uncaught ReferenceError View not defined in Controller.js" Does anybody know why this has started happening? As I have been working on this project for a while and this is the first time it has happened.
Just made a simple controller with some injection.
var SimpleProductListController = BaseController.extend({
_notifications:null,
_productsModel:null,
init:function($scope,ProductsModel,$route){
},
defineListeners:function(){
this._super();
},
destroy:function(){
}
})
/...
SimpleProductListController.$inject = ['$scope','ProductsModel','$route'];
The console error points to this:
http://errors.angularjs.org/1.2.16/ng/areq?p0=SimpleProductListController&p1=not%20aNaNunction%2C%20got%20undefined
Argument 'SimpleProductListController' is not aNaNunction, got undefined
How am I supposed to even debug this? I got batarang but it does nothing here.
Basically, Angular is saying that SimpleProductListController is undefined.
When I've gotten that error, it was because I created a controller and tried to inject it into my app but I did not load the file that defines that controller by adding the script tag to my index.html file.
I'm trying to update some texts on a page that is part of $scope. But I keep getting this error:
Error: [$rootScope:inprog] [http://errors.angularjs.org/1.2.15/$rootScope/inprog?p0=%24apply][1]
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:6:450
at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:101:443)
at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:108:301)
at h.$scope.changeLang (http://treenovum.es/xlsmedical/js/medical-app.js:80:16)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:169:382
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:186:390
at h.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:108:40)
at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:108:318)
at HTMLAnchorElement.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:186:372)
Obviously I'm doing something wrong. :)
Any ideas of how I can fix this? I want the page to update to the new variables in the scope.
This is the code I'm using for updating:
medicalApp.controller('MainCtrl', function($scope, $cookies, getTranslation) {
getTranslation.get(function(data){
$scope.translation = data;
});
$scope.changeLang = function (lang) {
console.log(lang);
$cookies.lang = lang;
$scope.$apply(function(){
getTranslation.get(function(data){
$scope.translation = data;
console.log(JSON.stringify($scope.translation));
});
});
};
});
the html:
<body ng-controller="MainCtrl">
...
<div class="header-lang col-xs-4">
<p>
DE |
FR</p>
<div>{{ translation.text }}</div> <---- Example variable I want updated.
...
I'm also using ngRoute with separate controllers for each page I load, if that has anything todo with it?
If your template don't change after changing models and you need using $scope.$apply, You can use $scope.$applyAsync instead of this.
https://github.com/angular-ui/ui-codemirror/issues/73
You are using $scope.$apply(...) inside the function changeLang so you are getting the common 'already in a digest' error. You don't need to put the call to getTranslation inside a $scope.$apply(...) block because ng-click already has you taken care of. Yank that out and it should just work. Also, I'd recommend running with a non-minified version of angular for dev so you can see better errors in your console.
$evalAsync works great:
$scope.$evalAsync(function() {
// Code here
});
Or simply:
$scope.$evalAsync();
See: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$evalAsync
I'm trying to call a function with arguments from Telerik grid ClientTemplate, like this:
.ClientTemplate("<a href=\"javascript:OnModifyDescription('<#= Value1 #>');\" title='Modify'>...</a>")
When the Value argument contains a single quote then on clicking the link results in the error: "Uncaught SyntaxError: Unexpected identifier".
What is the correct way to bind a function in a ClientTemplate?
Thanks in advance.
Make your client template as this :
.ClientTemplate("<a class='MyClass' myAttrib='<#= Value1 #>') title='Modify'>...</a>")
Then write the following scripts at top of your page:
<script>
$('a.MyClass').live('click',function(){
var myVal = $(this).attr('myAttrib');
OnModifyDescription(myVal);
});
</script>
Check this for jquery live function : http://api.jquery.com/live/
Using default mixitup configuration $('#id').mixitup(), I am adding a filter button dynamically by appending html code for button <li> tag. And calling the same function again instantly after adding html code to the page, in order to make the new button work. After clicking some filter buttons on the page (even if I don't press the new one) animation effects break and on the browser console I see:
Uncaught TypeError: Cannot read property 'left' of undefined error.
The error occurs on line 937:
$toshow.each(function () {
var data = this.data;
data.tX = data.finalPos.left - data.showInterPos.left; //HERE
I saw on documentation how to add new images to the list by using jquery after method, but there are no explanations about how to dynamically add filter buttons and initialize them on the fly.
Is the described behaviour expected?
That means I am doing something wrong. Then, how to initialize the new filter button correctly?
I am using Mixitup 1.5.6 (latest) with jQuery 1.10.2 (Also tried with jQuery 2.0.3).
Thanks in advance!
Your problem is that either data.finalPos or data.showInterPos is undefined. console.log data after you define it to see if you even have those keys
$toshow.each(function () {
var data = this.data;
console.log(data); //here
data.tX = data.finalPos.left - data.showInterPos.left;