Javascript 如何将对象引用传递给指令?
在我的应用程序中,我有一个Javascript 如何将对象引用传递给指令?,javascript,json,angularjs,angular-directive,Javascript,Json,Angularjs,Angular Directive,在我的应用程序中,我有一个ng repeat,它迭代JSON并将每个对象打印到页面上。例如,我的ng repeat打印动物 [ { name: "horse", sound: "Nay", legs: 4, }, { name: "beaver",
ng repeat
,它迭代JSON并将每个对象打印到页面上。例如,我的ng repeat
打印动物
[
{
name: "horse",
sound: "Nay",
legs: 4,
},
{
name: "beaver",
sound: "thwack",
legs: 2
}
]
我还想将每个动物传递给一个指令,并可能为它们添加一些键、值。问题是,当我添加动物对象作为属性并在指令中更新它时
i、 e
它不会在原始JSON中更新。就好像它与所有动物的整体阵列断开了连接
为什么??我怎样才能把它们放在一起?我希望对单个对象进行更新,以便在主JSON对象中进行更改。通过在html中使用{{model}},它将解析该值并将其放入html中。在您的例子中,JSON被字符串化,然后被转换回来,从而生成一个克隆对象。只需传递值的名称,而不是使用{{model}}
<div my-directive="model">
您可以使用隔离作用域。假设动物数组是父控制器的作用域属性,则可以执行以下操作:
<div ng-repeat="animal in animals">
<animal this-animal="animal"></animal>
</div>
有关更多详细信息,请参阅本页的“隔离范围”部分:
这比使用
$parse
好吗?这是否意味着我将无法使用控制器范围内的变量?是的,这意味着控制器范围内的变量不能直接使用。但是对于控制器中需要的所有变量,您可以类似地创建一个隔离作用域绑定。您可以解释一下,或者告诉我在哪里可以看到如何将控制器中的内容绑定到我的指令中吗?这与答案中所示完全一样。如果在控制器作用域中有一个变量,比如,$scope.x,那么在html中的指令中,编写并在指令的scope属性中添加isolateX:“=isolateX”,并在链接中使用$scope.isolateX。有关隔离范围的更多信息,我正在使用链接更新我的答案。
<div my-directive="model">
module.directive('myDirective', function($parse) {
return {
link: function(scope, element, attrs) {
var val = $parse(attrs.my directive)(scope);
}
};
});
<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;
}
};
});