隔离范围“="绑定和宠爱符号 AngularJS [英] Isolate Scope "=" binding and doted notation AngularJS
问题描述
如何在带点符号的隔离范围内创建带有嵌套属性的 2 路绑定.我以为 'myObject.data': "=data" 会起作用，但它不会.我不想链接 myObject 对象中的所有内容.我知道我可以做某种监视，但是 'myObject.data' 看起来更简洁.
How do you create a 2 way binding with a nested property in an isolate scope with dotted notation. I thought 'myObject.data': "=data" would work, but it does not. I don't want to link everything in the myObject object. I know I could do some sort of watch, but 'myObject.data' seems cleaner.
.directive("myDirective", [function() {
return {
restrict: "E",
scope: {
'myObject.data': "=data"
},
link: function (scope, element, attrs) {
scope.myObject = {
data: "myValue"
};
}
};
}])
推荐答案
隔离作用域通常只对模板有用，它们不应该用作声明您希望指令属性如何被解释的方式.这是因为大多数没有模板的指令通常需要子作用域或其环境的直接作用域的语义.
Isolated scopes are generally useful only with templates, they should not be used as a way to declare how you want your directive attributes to be interpreted. This is because most directives that don't have a template usually need the semantics of either a child scope or the direct scope of their environment.
就您而言，您可能甚至不需要 $watch，因为对象引用是启用 2 路数据绑定的原因，但如果没有您的完整代码，我无法确定.
In your case, you probably don't even need a $watch, because object references are what enable 2 way data binding, but without your full code I cannot be sure.
如果您想知道从孤立作用域语义到普通语义的翻译:
In case you want to know the translations for an isolated scope semantics to just a normal one:
@name -> attrs.name
=name -> $scope.$eval(attrs.name);
&name -> function() { return $scope.$eval(attrs.name); }
编辑 2:
在您发表评论后，我想出了这个 plunker.要保留两种方式的数据绑定，您必须使用.".在你的 ng-model 声明中.这是因为双向数据绑定不适用于值类型，因为它们是不可变的.例如，您不能更改 100 的值.您需要传递一个引用类型对象并挂起您正在更改的值.根据使双向数据绑定成为可能的原则，您无法在隔离范围定义中指定值的完整路径.
After your comment, I came up with this plunker. To preserve two way data binding you have to use a "." in your ng-model declaration. This is because two way data binding does not work for value types, since they are immutable. You can't change the value of 100 for example. You need to pass around a reference type object and hang the values you are changing off of it. Your desire to specify the full path to the value in the isolated scope definition is not possible based on the principles that two way data binding is made possible by.
Javascript:
Javascript:
angular.module('plunker', [])
.directive('twoWay', function() {
return {
restrict: 'E',
template: '<div><input ng-model="thing.name" type="text" /></div>',
scope: {
thing: "="
},
link: function(scope, element, attrs) {
}
};
})
.controller('MainCtrl', function($scope) {
$scope.data = {
name: "World"
};
});
HTML:
<body ng-controller="MainCtrl">
<p>Hello {{data.name}}!</p>
<two-way thing="data"></two-way>
</body>
这篇关于隔离范围“="绑定和宠爱符号 AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
