I'm working on a webpage based on AngularJS and sometimes I need to change the path (the shebang if you prefer it). The thing is that sometimes $location.path("/my_path_here") works, but sometimes I need to call $scope.$apply() after calling $location.path to make the webbrowser switch to the new path.

Why is this happening?

EDIT:

Example

I'm working on a webpage based on AngularJS and sometimes I need to change the path (the shebang if you prefer it). The thing is that sometimes $location.path("/my_path_here") works, but sometimes I need to call $scope.$apply() after calling $location.path to make the webbrowser switch to the new path.

Why is this happening?

EDIT:

Example http://pastebin./d1SjfCHd

• javascript
• html
• angularjs

Share Improve this question Follow edited Sep 4, 2013 at 10:11 alexandernst asked Sep 4, 2013 at 10:06 alexandernstalexandernst 15.1k2525 gold badges107107 silver badges213213 bronze badges 4

• Where is the method showdetails called from. I think you are calling into angular code from non angular context. Also looking at controller it is not the angular way of doing things. DOM access and manipulation is not done in controller. I suggest you read some documentation and tutorials on angular first. – Chandermani Commented Sep 4, 2013 at 10:16
• @Chandermani showDetails is called from KendoUI. And I'm not doing any DOM modification in my controllers. There is one small exception where I only read the DOM (the line you probably refer to), but that can't be avoided as it's a KendoUI limitation. – alexandernst Commented Sep 4, 2013 at 10:18
• Since I don't know about KendoUI much, but the reason maybe what i have explained. It may be similar to you calling the method from jquery or plain javascript. The code has to run in Angular context for angularjs to function correctly. If you define this controller inside a module, you would realize Kendo UI may not be able to call it. See if Kendo has some integration with Angular. – Chandermani Commented Sep 4, 2013 at 10:24
• @Chandermani Well, there is a lib that kind of integrates KendoUI with Angular, but that's not official integration so I think I'll just keep calling $apply() when calling from KendoUI. Thank you :) – alexandernst Commented Sep 4, 2013 at 10:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Take a look at this question and Misko's answer: How does data binding work in AngularJS?

That answer explains the process in technical great detail. So, I'm gonna tell it in layman's terms.

AngularJS makes itself work by using dirty checking, there are sets of values that angular is watching. Everytime something big happens, (a click, a function call in controller), angular runs a digest cycle, paring the watched values to see if there is any change. If there is a change, depending on the watcher, angular will take necessary action (update view, fire a callback, update route).

When you use default directives and no jquery event handling in controller, you will be fine. However, if you do, you need to know that you are NOT in the angular's digest cycle. Which means the watchers will not fire until a digest occurs.

You need to know when are you updating a variable that is being watched. Mostly it is custom DOM event (or jquery events). When it is the case, you need to let angular know that something is changed and it needs to re-check what happened (ie. update watchers).

This is by doing scope.$apply() after you have changed something.

Bear in mind that you cannot run an $apply() if you are already in the angular's digest cycle. It will throw an error like $digest already in progress.