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

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

2 个答案: