2013-08-07 3 views
1

Javascript:

var App = angular.module('App', []); 

App.controller('RootCntr', function ($scope) { 
    $scope.openedShelf = false; 

    console.log('controller', $scope.openedShelf); 

    setTimeout(function() { 
     $scope.openedShelf = true; 
     console.log('controller', $scope.openedShelf); 
    }, 2000); 
}); 

App.directive('shelf', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      'open': '=' 
     }, 
     link: function (scope, element, attrs) { 
      console.log('linked'); 

      scope.$watch('open', function (newVal, oldVal) { 
       console.log(newVal); 
       if (newVal) { 
        console.log(true, newVal); 
       } 
      }, true); 
     } 
    }; 
}); 

HTML-:

<body ng-app="App"> 
    <div ng-controller="RootCntr"> 
     <shelf open='openedShelf'></shelf> 
    </div> 
</body> 

При изменении значения openedShelf в RootCntr директива не ловя обновите его с помощью инструкции watch. Есть идеи?

ответ

2

Поскольку setTimeout не применяет $ apply, $ digest никогда не происходит, и наблюдатели никогда не вызываются. Внесите $ timeout в ваш контроллер и используйте $ timeout вместо setTimeout, так же, как вы использовали setTimeout. $ timeout обеспечивается угловым и всегда заставляет $ digest происходить.

$timeout(function() { 
    $scope.openedShelf = true; 
    console.log('controller', $scope.openedShelf); 
}, 2000); 
+0

Большое спасибо. Не знал, что существует отдельная функция таймаута $ для углового. – nickromano

+3

Просто FYI, есть третий (необязательный) аргумент $ timeout, называемый 'invokeApply'. Если установлено значение 'false', оно не вызывает $ apply. Таким образом, мы контролируем, выполняется ли цикл дайджест или нет с $ timeout. –

Смежные вопросы