指令作用域中的 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没有更新。

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

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

谢谢！

Answer 1

对我来说，你的问题看起来像这样：

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.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的$scope.condition值。因为它是双向绑定，所以它还在父$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>