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 框架或其摘要周期更新。