如何将对象引用传递给指令？

Question

在我的应用程序中，我有一个ng-repeat，它遍历 JSON 并将每个对象打印到页面上。例如，我的ng-repeat 打印动物

[
              {
                   name: "horse",
                   sound: "Nay",
                   legs: 4,
              },
              {
                    name: "beaver",
                    sound: "thwack",
                    legs: 2
              }
]

我还想将每个动物传递给指令，并可能向它们添加一些键值。问题是，当我将动物对象添加为属性并在指令中更新它时，

即

<animal this-animal={{animal}}></animal>

在指令链接函数中

var animalObj = scope.$eval(attrs.thisAnimal);
animalObj["gestation"] = 10;

它不会在原始 JSON 中更新。就像它与所有动物的整体阵列脱节一样。

为什么？我如何将它们保存在一起？我希望更新单个对象以更改主 JSON 对象。

Answer 1

通过在 html 中使用 {{model}}，它将解析该值并将其放入 HTML。在您的情况下，JSON 被字符串化，然后被转换回来，从而形成一个克隆对象。而不是使用 {{model}} 只需传递值的名称。

<div my-directive="model">

然后使用 $parse 访问模型值

module.directive('myDirective', function($parse) {
    return {
        link: function(scope, element, attrs) {
            var val = $parse(attrs.my directive)(scope);
        }
    };
});

Answer 2

您可以使用隔离范围。假设动物数组是父控制器的范围属性，您可以这样做：

<div ng-repeat="animal in animals">
    <animal this-animal="animal"></animal>
</div>

并在指令代码中：

module.directive('myDirective', function() {
    return {

        scope: {
            thisAnimal: "="
        },

        link: function(scope, element, attrs) {
            scope.thisAnimal.gestation = 10;
        }
    };
});

有关更多详细信息，请参阅此页面的隔离范围部分：

https://docs.angularjs.org/guide/directive