How to update scope var from Math expression and another scope var?
angularjs,angularjs-scope,angularjs-watch
You should define percentage as a function. See here: http://jsfiddle.net/waxolunist/5bnhj4vt/6/ HTML: <div ng-app="app"> <div ng-controller="AController"> <ul> <li class="red" ng-repeat="item in items" ng-style="{'width': percentage()}">{{item}}</li> </ul> <button ng-click="addItem()">addItem</button> </div> </div> JS: var app = angular.module('app', []); app.controller('AController', function($scope) { $scope.items = [1,2,3,4,5,6]; $scope.percentage = function() { return...
Angularjs updates the view but not the model
angularjs,html-select,angularjs-model,angularjs-watch
Angular updates the view based on model changes and the model based on user interactions with the view. By changing the selected option manually using ng-selected, angular has not seen the user select a new option and therefore does not update slave. And since slave has not changed since it...
AngularJS watcher in constructor not fired while testing
angularjs,jasmine,angular-services,angularjs-watch
var newObj = new MyObject(); This assigns noop to newObj.watcherCallback. And it registers newObj.watcherCallback (so, noop) as a watcher caallback. spyOn(newObj, 'watcherCallback'); This replaces newObj.watcherCallback by another function, which allows you to know when this new spy function is called. But it doesn't register this spy function as a watcher...
angularjs - resize div on window resize
angularjs,angularjs-directive,angularjs-scope,angularjs-watch
Why don't you just call the same function at init and resize ? myapp.directive('resize', function($window) { function updateUI(element) { var hh = document.getElementById('header').offsetHeight; var fh = document.getElementById('footer').offsetHeight; console.log('hh & fh', hh, fh); var tp = hh + 2; var bt = fh + 2; console.log('tp & bt', tp, bt); var...
How to use an isolated scope property properly?
angularjs,angularjs-directive,angularjs-watch,controlleras
You could use $watch inside your directive that will watch on change in value & will fire the code which you want. Code app.directive('myDirective', [function() { return { restrict: 'E', templateUrl: 'template.html', scope: { item: "=" }, controller: ['$scope', 'ExtendedItemFactory', function($scope, ExtendedItemFactory) { this.extendedInfo = ExtendedItemFactory.get({ id: $scope.item.id }); $scope.$watch('item',...
spyOn listener watch function not working
javascript,angularjs,jasmine,karma-jasmine,angularjs-watch
This is expected behavior, it has nothing to do with jasmine or angular but to do with the function reference held by the property. When you do $scope.$watch('name', this.changeName) on the controller instantiation, the function reference held by this.changeName(at that time) is set to be watched. Even if you spyOn...
How does angular binding happen?
angularjs,angularjs-watch,angularjs-bindings
Your understanding of how Angular sets up a watcher for each binding is pretty much right on the money. I'll go ahead and jump straight to the question, as opposed to debunking/discussing your point of view of what the inner workings of Angular bindings look like. I have a question...
angularJS why $scope.$watch cant't work?
javascript,angularjs,angularjs-scope,angularjs-watch
Use $watchCollection for an array or object $scope.$watchCollection('data', function (){ console.log('has changed'); }); JSBin...
AngularJs $watchGroup - which expression in the group was last changed?
javascript,angularjs,angularjs-service,angularjs-watch,angularjs-1.3
Angular offers $watchGroup (since 1.3). Basically it return the scope variable oldValue & newValue in the manner how we putted it in watchGroup. Use index of the scope variable to get its respective newVal and oldVal like Below For getting newValues of respective scope variables newValues[0] newValue[1] newValues[2] newValues[3] For...
Modifying a watched value within a $watch
javascript,angularjs,angularjs-watch
ng-change is probably a better approach in this case. In particular, this attribute of ng-change: if the model is changed programmatically and not by a change to the input value If you place your de-dupe in a function and then use ng-change to call it, I think you will get...
$rootsScope.$watch not getting triggered
angularjs,angularjs-scope,angularjs-watch
To me it looks as if the variable you want to watch is not in an AngularJs scope and as far as I know it will not work in this case. See this question for an explanation. What you need to do is trigger a digest cycle to get it...
ng-change doesn't get fired for email input unless I enter a valid email address
javascript,angularjs,angularjs-ng-change,angularjs-watch
You could get the value of the input element on keyup $scope.keyUp = function(){ console.log('value: ', event.target.value) } ...
In angularJs: what's the different between setting $watch on string variable and setting $watch on Object's key?
Basically $watch need string parameter & search for that parameter inside current scope & placed dirty watch on it. Watching on activedMenu.name OR selectedMenuName is one as the same thing, 1st one will watch on name property of activedMenu, the 2nd one will watch on selectedMenuName scope variable. The only...
Angularjs $watchCollection on $rootScope not triggered when values updated from directive
javascript,angularjs,events,angularjs-directive,angularjs-watch
Your actual problem is you are update $rootScope from the event which is outside the angular context, so its obivious that angular binding will not update because digest cycle doesn't get fired in that case. You need to fire it manually by using $apply() method of $rootScope el.bind('click', function(evt) {...
$watch within directive is not working when $rootScope value is changed
angularjs,angularjs-directive,watch,angularjs-watch
i have corrected it. for working fiddle <div ng-app="myapp"> <div ng-controller="TreeCtrl"> <input type="text" ng-model="userName"/> <button ng-click="changeValue()">Change</button> <tree name="name"> </tree> </div> </div> module.directive("tree", function($compile) { return { restrict: "E", transclude: true, scope: { name: '=' }, template:'<div>sample</div>', link : function(scope, elm, $attrs) { function update() { }; scope.$watch('name', function(newVal, oldVal) {...
AngularJS - 2 selects for a range of years. Options in second one have to be greater or equal than first one selected
angularjs,angularjs-filter,angularjs-watch
I cut down a bit of your code to begin with (jsfiddle). I'm sure it's not perfect yet usage-wise, but it is what you asked for. Maybe you could use a ng-change on the first select to update secondSelect? ($watch is overrated!) <div ng-app=""> <div ng-controller="appCtrl"> <select ng-model="firstSelect" > <option...
Is there a cost to repeating a $watch for the same variable?
Based on the comments and suggested addition of a log message from http://stackoverflow.com/users/1344008/npe, it is clear that in this instance the watch is created multiple times which I understood, and by looking at the log output: It is clear that every watch is added and even if exactly the same...
ng-click value change + $scope.watch bind not working properly
javascript,angularjs,angularjs-scope,angularjs-ng-click,angularjs-watch
You don't need to add a $watch because you have a click event that will set your filter variable. Also your if/else can be simplified with a js object. Please have a look at the demo below or this fiddle. angular.module('demoApp', []) .controller('mainController', MainController); function MainController($scope) { var filterMapping =...
$watch an Async Service variable doesn't work
javascript,angularjs,angularjs-watch
update: This is an extended example, using mostly your original code, showing how to completely go without $apply or $watch. Simply by using $q you can bypass most of the problems the first two functions could generate: (function (app, ng) { 'use strict'; app.controller('TestCtrl', ['$scope', 'RefreshViewService', function ($scope, RefreshViewService) {...