Angular directive scope not reflecting changes in controller scope

Question

I am writing a directive that needs to show a search box and a few values in a grid. Entering a search text could change the values in the grid.

http://jsfiddle.net/rtv2222/st55azbg/5/

<div ng-controller="MyCtrl">
  <my-directive values='some.values' onsearchtextchange='onsearchtextchange' searchtext='some.searchtext'></my-directive>
  </div>

  var demo = angular.module('demo', []);
  demo.directive('myDirective', function($parse) {
  return {
    restrict: "E",
    scope: {         
        values: '=',
        searchtext: '=',
        onsearchtextchange: '&'
    },
    template: '{{values.length}} <input ng-model="searchtext">',
    link:
    function(scope, element, attrs){
        scope.$watch('searchtext', function (tmpStr){
            setTimeout(function() {
                // if searchStr is still the same..
                // go ahead and retrieve the data
                if (tmpStr === scope.searchtext)
                {
                    scope.onsearchtextchange()(scope.searchtext);
                    console.log(scope.values.length);
                }
            }, 1000);
        });
    }
}
});

function MyCtrl ($scope) {
$scope.some = {};
$scope.some.values = [{a:1}, {a:2}];
$scope.some.searchtext = "";
$scope.onsearchtextchange = function(searchtext) {
    if (searchtext && searchtext.length != 0) {
        $scope.some.values = [{a:1}];
        console.log('values.length is:' + $scope.some.values.length);
    }
    else {
        $scope.some.values = [{a:1}, {a:2}];
        console.log('values.length is:' + $scope.some.values.length);
    }
}
};

I am binding the searchtext, onsearchtextchange callback and the values with an isolate scope to the directive. I $watch the searchtext and make a callback into the controller function which updates the list of values.

I however find that the directive scope does not reflect the change in the value of 'values' on the controller scope.

What should I do so that the child scope is updated whenever the callback updates the values on the controller scope ?

As you can see when you run the example, when the searchtext is changed, the onsearchtextchange callback is called and the controller scope.some.values is changed. The directive scope values is however still the old value.

Answer 1

在我的控制器回调中添加$ scope。$ apply（）可以解决问题。

Answer 2

Instead of using setTimeout() you can use the AngularJS $timeout service, which goes along with a $scope.$apply() internally. This way, you don't need to call $scope.$apply() in you controller.

demo.directive('myDirective', function($parse, $timeout) {
  return {
    restrict: "E",
    scope: {         
        values: '=',
        searchtext: '=',
        onsearchtextchange: '&'
    },
    template: '{{values.length}} <input ng-model="searchtext">',
    link:
    function(scope, element, attrs){
        scope.$watch('searchtext', function (tmpStr){
            $timeout(function() {
                // if searchStr is still the same..
                // go ahead and retrieve the data
                if (tmpStr === scope.searchtext)
                {
                    scope.onsearchtextchange()(scope.searchtext);
                    console.log(scope.values.length);
                }
            }, 1000);
        });
      }
   };
});