为什么在 link 中改变父指令范围的值不会将该变异状态提供给子指令？

Question

我有一个父指令被传递一个数组作为它的一个属性的值。父指令的工作是渲染一些组件，然后将该数组的修改版本发送给子指令。然后子指令需要呈现修改后的数组。

在父指令的 link 函数中调整此数组似乎不会将更改传播到呈现的子指令。

这是为什么？

我才进入 AngularJS 几天，可能对范围或生命周期有根本性的误解，但我不确定是哪一个。

下面的示例通过让父指令将 3 压入其中来修改提供给父指令的 [1,2] 数组。

父指令呈现一个模板，其中包含子指令以及我希望的变异数组。

屏幕将呈现未变异的数组（从子指令呈现），但 console.log 变异的数组（从父指令记录）

https://codesandbox.io/s/trusting-fire-k4so0?fontsize=14&hidenavigation=1&theme=dark

src/index.js

"use_strict";

var angular = require("angular");

angular
  .module("App", [])
  .controller("IgnorableController", [function(){}])
  .directive("parentIsolatedScope", [
    function() {
      return {
        restrict: "E",
        template:
          "<child-isolated-scope mutated-array='mutableArray'></child-isolated-scope>",
        scope: {
          mutableArray: "<"
        },
        link: function(scope) {
          scope.mutableArray.push(3);
          console.log(scope.mutableArray);
        }
      };
    }
  ])
  .directive("childIsolatedScope", [
    function() {
      return {
        restrict: "E",
        template: "<div>{{mutatedArray | json}}</div>",
        scope: {
          mutatedArray: "<"
        }
      };
    }
  ]);

index.html

<!DOCTYPE html>
<html ng-app="App">
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <script src="src/index.js"></script>
  </head>

  <body ng-controller="IgnorableController">
    <parent-isolated-scope mutable-array="[1,2]"></parent-isolated-scope>
  </body>
</html>

Answer 1

如果您为初始数组声明一个变量并使用它将数组传递给指令，它将按预期工作：

<body ng-controller="IgnorableController">
    <parent-isolated-scope mutable-array="initialArray"></parent-isolated-scope>
</body>

在IgnorableController中，数组变量：

$scope.initialArray= [1, 2];

工作演示：DEMO

Answer 2

如果您为初始数组声明一个变量并使用它将数组传递给指令，它将按预期工作。

Can you provide an explanation as to why that's the case?

<body ng-controller="IgnorableController">
    <parent-isolated-scope mutable-array="[1,2]"></parent-isolated-scope>
</body>

当绑定是解析为数组的 AngularJS 表达式时，在每个摘要循环中，框架都会计算表达式并将隔离范围变量设置为该值。在每个摘要周期中，框架都会重新设置值以替换任何突变。

有一个变量：

<body ng-controller="IgnorableController" ng-init="x = [1,2]">
    <parent-isolated-scope mutable-array="x"></parent-isolated-scope>
</body>

对变量的引用已分配给隔离作用域。

请注意，对引用内容的任何更改都会更改子隔离作用域和父作用域中的内容。这可能会对某些设计产生意想不到的后果。

为什么在 link 中改变父指令范围的值不会将该变异状态提供给子指令？

Why does mutating a value of a parent directive's scope in link not provide that mutated state to a child directive?

angularjs

angularjs-directive

angularjs-scope