AngularJS 指令的 scope 更改不更新父 controller Z31A1FD140BE4BEF2AD511E121EC9ZA

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没有更新。

我的问题是：
为什么更改condition[0]时toggle不更新？ 为什么摘要循环也不会更新toggle ？ 或者当它的分配值发生变化时，摘要循环甚至更新toggle ？

我不是要解决这个问题，而是要解决这个问题的原因。

谢谢！

Answer 1

尝试删除指令配置中的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>

Answer 2

对我来说，你的问题是这样的：

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

为什么a在第二个console.log之后不true ？ a和b不应该一样吗？

不，因为a和b是独立的实体。

同样，当代码将值false分配给指令 scope 中的$scope.props[0]时，它会绑定到父 scope 的$scope.condition[0] 。

$scope.toggle和$scope.condition[0]是独立的实体。 b变化时a不变。

当$scope.condition[0]改变时，$ $scope.toogle不会改变。

---

为什么摘要循环也不会更新切换？ 或者当它的分配值发生变化时，摘要循环甚至更新切换？

ng-if="toggle"指令在$scope.toggle上创建一个监视。 它从不修改$scope.toggle 。

props="condition"绑定在指令的$scope.props上创建一个监视并更新父$scope的$scope.condition的值。 因为它是双向绑定，所以它还对父级的$scope.condition进行监视并更新指令的$scope.props属性。

$scope.toggle属性永远不会被 AngularJS 框架或其摘要周期更新。