0

According to Kendo best practices, Kendo sometimes requires to use $scope.$apply(); to update Angular. Howerver, new AngularJS 1.5 component discourages to use $scope.

Old Controller - http://dojo.telerik.com/exok

New 1.5 Component - http://plnkr.co/edit/tPTqlzlC9Obn5UFRUqc2?p=preview

In order to make the above code to work, I gotta assign this to a variable. For example, var self = this; ... self.firstName = item.firstName;.

My Question is how we apply Angular correctly without using $scope.$apply(); or even $scope when we are dealing with Kendo or even non-Angular stuff.

Win
  • 61,100
  • 13
  • 102
  • 181

1 Answers1

1

Yes, your way to creating 'self' variable is correct. Because if you use 'this', it will refer to the object/context executing the change method, not the controller. See updated version at http://plnkr.co/edit/AbVz2IqY0b6tT5pds2rF?p=preview

$scope.$apply() is used to trigger Angular $digest cycle.

Normally you don't have to call it manually because Angular framework is already doing it for you at some different level of code. For example, you can see the source code of ng-click directive, Angular call $apply by itself.

In your example, Kendo UI Grid requires you to call $apply directly because the gridOption.change callback is executed by Kendo UI Grid, not by Angular. So you must call $apply to tell Angular to run $digest cycle to check for any dirty values and update the views accordingly.

Regarding the best practice, since 1.3, Angular introduced controller as syntax, which helped enforce the 'dot notation' best practice and further eliminate the use of 'scope'. In 1.5, they continue eliminating the verbosity of 'directive' usage by introducing 'component' usage. All of these are part of the transition steps to ease the migrating from Angular 1.x to Angular 2. Check out the official guide to see more about the recommended steps.

Community
  • 1
  • 1
6220119
  • 809
  • 10
  • 21