AngularJS - Why does $scope.$apply affect other scopes - angularjs

In my AngularJS app, I have 2 controllers which are not nested. Calling the $scope.$apply method seems to affect the other sibling scope as well.
In the jsfiddle below, it seems that the ControllerOne's {{doubleMe(x)}} expression is evaluated whenever ControllerTwo updates the clock every second. This can be shown from the console message.
I can understand why that expression is evaluated whenever the text input (on the same scope) changes, but why would $scope.$apply on another scope cause that expression to be re-evaluated as well?
Note that I could have avoided $scope.$apply by using $timeout, but the outcome is observed.
<!-- HTML file -->
<div ng-app>
<h1>Root</h1>
<div ng-controller="ControllerOne">
<h2>Scope One</h2>
1 * 2 = {{doubleMe(1)}}<br/>
2 * 2 = {{doubleMe(2)}}<br/>
3 * 2 = {{doubleMe(3)}}<br/>
<input ng-model="text">
</div>
<div ng-controller="ControllerTwo">
<h2>Scope Two</h2>
{{clock.now | date:'yyyy-MM-dd HH:mm:ss'}}
</div>
</div>
// js file
function ControllerOne($scope) {
var counter=1;
$scope.doubleMe = function(input) {
console.log(counter++);
return input*2;
}
$scope.text = "Change Me";
}
function ControllerTwo($scope) {
$scope.clock = {
now: new Date()
};
var updateClock = function() {
$scope.clock.now = new Date()
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
}

as you can see $scope.$apply = $rootScope.$digest //+ some error handling and since $scope.$apply uses $rootScope it affects all its descendants.
so If you update a child scope, you can call $scope.$digest to dirty-check only that scope and its descendants and as a result you reduce the number of dirty-checks and increase your performance.
Example
I changed your code and added $digest.
setInterval(function() {
$scope.clock.now = new Date();
$scope.$digest();
}, 1000);
Live example:
http://jsfiddle.net/choroshin/JY5sb/4/

From the AngularJS docs in the source code
* # Pseudo-Code of `$apply()`
* <pre>
function $apply(expr) {
try {
return $eval(expr);
} catch (e) {
$exceptionHandler(e);
} finally {
$root.$digest();
}
}
* </pre>
Alex is correct that if you just want to have your changes reflected in the current scope and its children, scope.$digest() is the thing to use. However, AngularJS often discourages this since expressions often have side-effects that modify global objects like services which can in turn modify sibling scopes.

Related

Angular binding to a read-only property

How do you enforce read-only properties in a performant way in Angular?
Controller:
function MyCtrl($scope) {
$scope.clickCount = 0;
$scope.incrementCount = function() {
$scope.clickCount = $scope.clickCount + 1;
}
}
View:
<div ng-controller="MyCtrl">
Clicked {{clickCount}} times
<button ng-click="incrementCount()">Doober</button>
<input type="text" ng-model="clickCount" /><!-- how do I prevent this -->
</div>
I know I could make clickCount a getter function getClickCount(), but will that kill the performance since Angular will have to call this function on every digest cycle?
http://jsfiddle.net/zb05om1k/
Update
I'm looking for a way that makes it clear that the read only property should not be changed directly but instead through the provided function. Additionally, prevent the view from changing the property directly.
use the angular directive ng-readonly, it works just like it sounds...
https://docs.angularjs.org/api/ng/directive/ngReadonly
In your example, incrementCount() is called once and takes a negligible amount of time to execute, then Angular starts a digest cycle and the DOM rebuilds, which would happen anyway.
As a general rule, you don't need to optimize code whose time is bound by user input. Your example code looks fine to me.
If you really want to enforce separation of concerns by making the property read-only, you can use Object.defineProperty to prevent writes:
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function MyCtrl($scope) {
var clickCount = 0; // Private variable
Object.defineProperty($scope, 'clickCount', {
set: function() { // Prevent views from editing data
throw new Error('Operation not supported');
},
get: function() {
return clickCount;
}
});
$scope.incrementCount = function() {
clickCount++;
}
});
When you put data in the input, the controller throws an error and the change is immediately erased in the DOM.
Fiddle: http://jsfiddle.net/acbabis/5bq5oeq3/

AngularJS - $interval not recognising variables

I am trying to make a basic function that adds 1 to the variable 'wood' every second.
In javascript, a simple
setInterval(function(){
wood++;
}, 1000);
would do the trick.
In Angular, I've been shown
app.controller('RandomCtrl', function($interval){
this.wood = 0;
$interval(function(){
this.wood++;
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('RandomCtrl', function($interval){
this.wood = 0;
$interval(function(){
this.wood++;
document.getElementById('p').innerHTML = this.wood;
}, 1000);
});
</script>
<div ng-app='app' ng-controller='RandomCtrl as rand'>
Wood: {{ rand.wood }}
<br><br>Wood's value straight from the $interval:<p id='p'></p>
So, the interval is fine, but the variable is undefined inside it, which is the whole point of me using this interval.
<br><br>Also, I want this.wood to hold the value, nothing else.
</div>
However, the code above for some reason doesn't work.
It treats this.wood+1 as 'NaN' and this.wood as 'undefined'
Here's the snippet:
From http://ryanmorr.com/understanding-scope-and-context-in-javascript/ :
Context is most often determined by how a function is invoked. When a
function is called as a method of an object, this is set to the object
the method is called on
When called as an unbound function, this will default to the global
context or window object in the browser. However, if the function is
executed in strict mode, the context will default to undefined.
Just use angulars $scope or a variable declared in the outer function scope:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('RandomCtrl', function($interval, $scope){
var self = this;
self.wood = 0;
$scope.wood = 0;
$interval(function(){
$scope.wood++;
self.wood++;
}, 1000);
});
</script>
<div ng-app='app' ng-controller='RandomCtrl as rand'>
Wood: {{ wood }} {{ rand.wood }}
<br><br>Wood's value straight from the $interval:<p id='p'></p>
So, the interval is fine, but the variable is undefined inside it, which is the whole point of me using this interval.
<br><br>Also, I want this.wood to hold the value, nothing else.
</div>
The problem here is that you are trying to access your scope in a new context, where 'this' no longer refers to your angular controller.
In addition, Angular allows variables to be accessible through your controller's scope. If you want to use your variable wood in your template, you have to assign it on the scope object.
Your code should read:
app.controller('RandomCtrl', function($interval, $scope){
$scope.wood = 0;
$interval(function(){
$scope.wood++;
}, 1000);
});
The reason why this fails silently is that this.TEST++ returns NaN and not an error.

Updating model programmatically in angularjs

I am trying to do the following:
angular.module("controllers", [])
.controller("FooController", function($scope) {
$scope.foo = {};
$scope.foo['bar'] = 0;
setInterval(function(){
$scope.foo['bar']++;
}, 100);
} );
And then, I display the value of foo.bar in my view using
<div> {{ foo.bar }} </div>
The initial value is displayed correctly, but it is never updated. The callback within setInterval is called correctly and the value of bar is updated in javascript.
How can I programmatically "push" my data into the model? (in my real app I'll be pushing data from the server via websockets / atmosphere)
If you use the angular $interval service instead of setInterval. Then you will not need to call $scope.$apply.
angular.module("controllers", [])
.controller("FooController", function($scope, $interval) {
$scope.foo = {};
$scope.foo['bar'] = 0;
$interval(function(){
$scope.foo['bar']++;
}, 100);
} );
You have to trigger a new digest cycle, in which Angular will check all the registered watches and update the view for objects that changed value. You can do it by calling $scope.$apply, which will trigger the digest cycle for you.
setInterval(function(){
$scope.$apply(function() {
$scope.foo.bar++;
})
}, 100);
Ok, I've found the answer: wrap $scope.foo['bar']++ into
$scope.$apply(function({
$scope.foo['bar']++
}))

angularJS $broadcast and $on

is there a way to make the $broadcast propagate the variable to the $on during initialization phase?
<div ng-app='test'>
<div ng-controller='testCtrl'> <span>{{testContent}}</span>
</div>
<div ng-controller="testCtrl2">
<input type='text' ng-change="updateContent()" ng-model="testContent2" />
</div>
</div>
var app = angular.module('test', []);
app.factory('sharedContent', function ($rootScope) {
var standardContent;
var resizeProportion;
return {
setStandardContent: function (newStandardContent) {
standardContent = newStandardContent;
$rootScope.$broadcast('updateContent');
console.log('broadcast');
},
getStandardContent: function () {
return standardContent;
},
setResizeProportion: function (newResizeProportion) {
$rootScope.$broadcast('updateResizeProportion');
},
}
});
app.run(function (sharedContent) {
sharedContent.setStandardContent('haha');
});
function testCtrl($scope, sharedContent) {
$scope.testContent;
$scope.$on('updateContent', function () {
console.log('receive');
$scope.testContent = sharedContent.getStandardContent();
});
}
function testCtrl2($scope, sharedContent) {
$scope.testContent2 = 'test';
$scope.updateContent = function () {
sharedContent.setStandardContent($scope.testContent2);
};
}
Sample fiddle : http://jsfiddle.net/jiaming/NsVPe/
The span will display the value as the input changes, which is due to the ng-change function.
However, at initialization phase, the value "haha" was not propagated to the $scope.testContent and thus, nothing was shown at first runtime. Is there a way to make the value "haha" appear at the first runtime?
Thank you.
Just provide a little delay using $timeout function. Just update the code in the factory it will start working.
Please refer the code below for the factory:
app.factory('sharedContent', function ($rootScope,$timeout) {
var standardContent;
var resizeProportion;
return {
setStandardContent: function (newStandardContent) {
standardContent = newStandardContent;
$timeout(function(){
$rootScope.$broadcast('updateContent');
},0)
console.log('broadcast');
},
getStandardContent: function () {
return standardContent;
},
setResizeProportion: function (newResizeProportion) {
$rootScope.$broadcast('updateResizeProportion');
},
}
});
The reason for this is that the ng-change triggers upon subsequent changes to the model identified by testContent2. When the controller initializes, the value "test" is assigned to it. ng-change then keeps a track of subsequent changes - the initial assignment does not qualify for this, only subsequent changes do.
http://jsfiddle.net/vZwy4/ - I updated the fiddle provided by you. Here you can see that the span tag is correctly populated with the data.
What you needed to do was instead of using ng-change, you should use the scope's $watch functionality. So remove the ng-change directive from the input box and remove the updateContent method. Instead, replace it with the following code wherein you watch the changes to the testContent2 model:
$scope.$watch('testContent2', function () {
if ($scope.testContent2 === undefined || $scope.testContent2 === null) {
return;
}
sharedContent.setStandardContent($scope.testContent2);
});
You can now see that the word "test" (I could not find anything to do with 'haha') appears the moment the page loads. Subsequent changes to the input are also updated in the span. Hope this is what you were looking for.
The thing that you are not taking into account that the run phase of the app gets executed before the controllers are initialized. Because broadcasted messages don't get buffered and are only served to the listeners that are listening in the moment the message is created, the haha value gets lost.
In your case, however, it's quite easy to make it work with a small change in your controller:
function testCtrl($scope, sharedContent) {
updateTestContent();
$scope.$on('updateContent', updateTestContent);
function updateTestContent(){
$scope.testContent = sharedContent.getStandardContent();
}
}
I forked your JSFiddle here http://jsfiddle.net/y3w5r01d/2/ where you can see on the console when each function (run and controllers) gets executed.

AngularJS access scope from outside js function

I'm trying to see if there's a simple way to access the internal scope of a controller through an external javascript function (completely irrelevant to the target controller)
I've seen on a couple of other questions here that
angular.element("#scope").scope();
would retrieve the scope from a DOM element, but my attempts are currently yielding no proper results.
Here's the jsfiddle: http://jsfiddle.net/sXkjc/5/
I'm currently going through a transition from plain JS to Angular. The main reason I'm trying to achieve this is to keep my original library code intact as much as possible; saving the need for me to add each function to the controller.
Any ideas on how I could go about achieving this? Comments on the above fiddle are also welcome.
You need to use $scope.$apply() if you want to make any changes to a scope value from outside the control of angularjs like a jquery/javascript event handler.
function change() {
alert("a");
var scope = angular.element($("#outer")).scope();
scope.$apply(function(){
scope.msg = 'Superhero';
})
}
Demo: Fiddle
It's been a while since I posted this question, but considering the views this still seems to get, here's another solution I've come upon during these last few months:
$scope.safeApply = function( fn ) {
var phase = this.$root.$$phase;
if(phase == '$apply' || phase == '$digest') {
if(fn) {
fn();
}
} else {
this.$apply(fn);
}
};
The above code basically creates a function called safeApply that calles the $apply function (as stated in Arun's answer) if and only Angular currently isn't going through the $digest stage. On the other hand, if Angular is currently digesting things, it will just execute the function as it is, since that will be enough to signal to Angular to make the changes.
Numerous errors occur when trying to use the $apply function while AngularJs is currently in its $digest stage. The safeApply code above is a safe wrapper to prevent such errors.
(note: I personally like to chuck in safeApply as a function of $rootScope for convenience purposes)
Example:
function change() {
alert("a");
var scope = angular.element($("#outer")).scope();
scope.safeApply(function(){
scope.msg = 'Superhero';
})
}
Demo: http://jsfiddle.net/sXkjc/227/
Another way to do that is:
var extScope;
var app = angular.module('myApp', []);
app.controller('myController',function($scope, $http){
extScope = $scope;
})
//below you do what you want to do with $scope as extScope
extScope.$apply(function(){
extScope.test = 'Hello world';
})
we can call it after loaded
http://jsfiddle.net/gentletech/s3qtv/3/
<div id="wrap" ng-controller="Ctrl">
{{message}}<br>
{{info}}
</div>
<a onClick="hi()">click me </a>
function Ctrl($scope) {
$scope.message = "hi robi";
$scope.updateMessage = function(_s){
$scope.message = _s;
};
}
function hi(){
var scope = angular.element(document.getElementById("wrap")).scope();
scope.$apply(function() {
scope.info = "nami";
scope.updateMessage("i am new fans like nami");
});
}
It's been a long time since I asked this question, but here's an answer that doesn't require jquery:
function change() {
var scope = angular.element(document.querySelector('#outside')).scope();
scope.$apply(function(){
scope.msg = 'Superhero';
})
}
Here's a reusable solution: http://jsfiddle.net/flobar/r28b0gmq/
function accessScope(node, func) {
var scope = angular.element(document.querySelector(node)).scope();
scope.$apply(func);
}
window.onload = function () {
accessScope('#outer', function (scope) {
// change any property inside the scope
scope.name = 'John';
scope.sname = 'Doe';
scope.msg = 'Superhero';
});
};
You can also try:
function change() {
var scope = angular.element( document.getElementById('outer') ).scope();
scope.$apply(function(){
scope.msg = 'Superhero';
})
}
The accepted answer is great. I wanted to look at what happens to the Angular scope in the context of ng-repeat. The thing is, Angular will create a sub-scope for each repeated item. When calling into a method defined on the original $scope, that retains its original value (due to javascript closure). However, the this refers the calling scope/object. This works out well, so long as you're clear on when $scope and this are the same and when they are different. hth
Here is a fiddle that illustrates the difference: https://jsfiddle.net/creitzel/oxsxjcyc/
I'm newbie, so sorry if is a bad practice. Based on the chosen answer, I did this function:
function x_apply(selector, variable, value) {
var scope = angular.element( $(selector) ).scope();
scope.$apply(function(){
scope[variable] = value;
});
}
I'm using it this way:
x_apply('#fileuploader', 'thereisfiles', true);
By the way, sorry for my english
<input type="text" class="form-control timepicker2" ng-model='programRow.StationAuxiliaryTime.ST88' />
accessing scope value
assume that programRow.StationAuxiliaryTime is an array of object
$('.timepicker2').on('click', function ()
{
var currentElement = $(this);
var scopeValues = angular.element(currentElement).scope();
var model = currentElement.attr('ng-model');
var stationNumber = model.split('.')[2];
var val = '';
if (model.indexOf("StationWaterTime") > 0) {
val = scopeValues.programRow.StationWaterTime[stationNumber];
}
else {
val = scopeValues.programRow.StationAuxiliaryTime[stationNumber];
}
currentElement.timepicker('setTime', val);
});
We need to use Angular Js built in function $apply to acsess scope variables or functions outside the controller function.
This can be done in two ways :
|*| Method 1 : Using Id :
<div id="nameNgsDivUid" ng-app="">
<a onclick="actNgsFnc()"> Activate Angular Scope</a><br><br>
{{ nameNgsVar }}
</div>
<script type="text/javascript">
var nameNgsDivVar = document.getElementById('nameNgsDivUid')
function actNgsFnc()
{
var scopeNgsVar = angular.element(nameNgsDivVar).scope();
scopeNgsVar.$apply(function()
{
scopeNgsVar.nameNgsVar = "Tst Txt";
})
}
</script>
|*| Method 2 : Using init of ng-controller :
<div ng-app="nameNgsApp" ng-controller="nameNgsCtl">
<a onclick="actNgsFnc()"> Activate Angular Scope</a><br><br>
{{ nameNgsVar }}
</div>
<script type="text/javascript">
var scopeNgsVar;
var nameNgsAppVar=angular.module("nameNgsApp",[])
nameNgsAppVar.controller("nameNgsCtl",function($scope)
{
scopeNgsVar=$scope;
})
function actNgsFnc()
{
scopeNgsVar.$apply(function()
{
scopeNgsVar.nameNgsVar = "Tst Txt";
})
}
</script>
This is how I did for my CRUDManager class initialized in Angular controller, which later passed over to jQuery button-click event defined outside the controller:
In Angular Controller:
// Note that I can even pass over the $scope to my CRUDManager's constructor.
var crudManager = new CRUDManager($scope, contextData, opMode);
crudManager.initialize()
.then(() => {
crudManager.dataBind();
$scope.crudManager = crudManager;
$scope.$apply();
})
.catch(error => {
alert(error);
});
In jQuery Save button click event outside the controller:
$(document).on("click", "#ElementWithNgControllerDefined #btnSave", function () {
var ngScope = angular.element($("#ElementWithNgControllerDefined")).scope();
var crudManager = ngScope.crudManager;
crudManager.saveData()
.then(finalData => {
alert("Successfully saved!");
})
.catch(error => {
alert("Failed to save.");
});
});
This is particularly important and useful when your jQuery events need to be placed OUTSIDE OF CONTROLLER in order to prevent it from firing twice.

Resources