Menu
  • HOME
  • TAGS

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...

Is there a cost to repeating a $watch for the same variable?

angularjs,angularjs-watch

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-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) } ...

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 $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...

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 - 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...

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...

$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) {...

$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...

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...

In angularJs: what's the different between setting $watch on string variable and setting $watch on Object's key?

angularjs,angularjs-watch

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...

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...

$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) {...

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...

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 =...

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',...

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...

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) {...