Изменение AngularJS в области действия директивы не обновляет область действия родительского контроллера

Question

HTML:

<div ng-app="myApp" ng-controller="Controller">
    <test ng-if="toggle" props="condition"></test>
</div>

Javascript:

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

myApp.controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {
    $scope.condition = [true];
    $scope.toggle = $scope.condition[0];
    $scope.$watch('condition', (newv, oldv, scope) => {
        console.log('old: ' + oldv);
        console.log('new: ' + newv);
        console.log('toggle: ' + scope.toggle);
    }, true);
}]);

myApp.directive("test", function() {
   return {
       template: '<div>directive show</div>',
       replace: true,
       scope: {
           props: "="
       },
       controller: ['$scope', '$timeout', function($scope, $timeout) {
           $scope.props[0] = false;
       }]
   }
});

Поведение таково, что после изменения condition[0] директивой на false, я вижу новое значение в журнале консоли,но toggle не обновляется.

Мой вопрос :Почему toggle не обновляется при изменении condition[0]? Почему цикл дайджеста также не обновляет toggle? Или цикл дайджеста вообще обновляет toggle при изменении назначенного ему значения?

И я НЕ прошу решения этой проблемы, но причина этой проблемы.

Спасибо!

Answer 1

Для меня ваш вопрос выглядит так:

var a = false;
var b = a;
console.log(a,b);
var b = true;
console.log(a,b);

Почему a не true после второго console.log? Разве a и b не должны быть одинаковыми?

Нет, потому что a и b являются отдельными объектами.

Аналогично, когда код присваивает значение false to $scope.props[0] в области действия директивы связано с $scope.condition[0] родительской области.

$scope.toggle и $scope.condition[0] являются отдельными объектами. a не изменяется при изменении b.

$scope.toogle не изменяется при изменении $scope.condition[0].

---

Почему цикл дайджеста не обновляет переключательтакже? Или цикл дайджеста вообще обновляет переключение при изменении назначенного ему значения?

Директива ng-if="toggle" создает часы на $scope.toggle. Он никогда не изменяет $scope.toggle.

Привязка props="condition" создает наблюдение за $scope.props директивы и обновляет значение $scope.condition родительского $scope. Поскольку это двусторонняя привязка, она также помещает наблюдение в родительский элемент $scope.condition и обновляет свойство $scope.props директивы.

Свойство $scope.toggle никогда не обновляется платформой AngularJSили его цикл дайджеста.

Answer 2

Попробуйте удалить replace: true в конфигурации директивы.

при использовании replace: true, он заменит тег директивы содержимым, поэтому вы потеряете директиву ngIf в качестве исходного значениядля toggle это true.

<test ng-if="toggle" props="condition"></test>

будет заменено на

 <div>directive show</div>

Таким образом, результат будет

<div ng-app="myApp" ng-controller="Controller">
  <div>directive show</div>
</div>