角指令：分离范围内使用NG-模型 [英] Angular directive: using ng-model within isolate scope
问题描述
我无法工作了我怎么能自定义一个指令，既：
I'm having trouble working out how I can define a custom directive that both:
- 使用隔离范围，
- 使用一个新的范围NG-模式指令在模板中。
下面是一个例子：
HTML
<body ng-app="app">
<div ng-controller="ctrl">
<dir model="foo.bar"></dir>
Outside directive: {{foo.bar}}
</div>
</body>
JS：
var app = angular.module('app',[])
.controller('ctrl', function($scope){
$scope.foo = { bar: 'baz' };
})
.directive('dir', function(){
return {
restrict: 'E',
scope: {
model: '='
},
template: '<div ng-if="true"><input type="text" ng-model="model" /><br/></div>'
}
});
这里的期望的行为是输入的值绑定到外部范围的 foo.bar 属性，通过该指令的（隔离）范围模型属性。这不会发生，因为NG-如果在模板上的封闭DIV指令创建一个新的范围，所以这是该范围内的模式，获取更新，而不是指令的范围的。
通常你解决通过确保有在EX pression点这些NG-模式的问题，但我看不出有什么办法做到这一点在这里。我想，如果我也许能够使用这样的事情对我的指令：
The desired behaviour here is that the input's value is bound to the outer scope's foo.bar property, via the the directive's (isolate) scope model property. That doesn't happen, because the ng-if directive on the template's enclosing div creates a new scope, so it's that scope's model that gets updated, not the directive's scope's.
Ordinarily you solve these ng-model issues by making sure there's a dot in the expression, but I can't see any way to do that here. I wondered if I might be able to use something like this for my directive:
{
restrict: 'E',
scope: {
model: {
value: '=model'
}
},
template: '<div ng-if="true"><input type="text" ng-model="model.value" /><br/></div>'
}
但是，这并不工作...
but that doesn't work...
推荐答案
您是对的 - NG-如果创建时，在输入文本字段中输入文本，这是造成问题的子范围。它创建了一个名为儿童范围模式阴影属性，它是具有相同名称父范围的变量的副本 - 有效地打破了模型绑定双向的。
You are right - ng-if creates a child scope which is causing a problem when text is entered in the input text field. It creates a shadow property named 'model' in child scope which is a copy of the parent scope variable with the same name - effectively breaking the two-way model binding.
这个解决方法是简单的。在模板中，指定$父preFIX：
The fix for this is simple. In your template, specify the $parent prefix:
template: '<div ng-if="true">
<input type="text" ng-model="$parent.model" /><br/>
</div>'
这确保它能够解决从$父范围'模式'，这你已经设置已经为双向模式通过隔离范围结合。
This ensures that it will resolve 'model' from the $parent scope, which you've already setup for two-way model binding through the isolated scope.
在结束时，。在NG-模式节省了一天。我发现它有用想什么留下的圆点作为一个角的方式来解决，通过继承范围的财产。如果没有点，解决财产当我们指定范围内的变量只能成为一个问题（否则，查找都是精品，其中包括只读 {{}模式} 结合前pressions）。
In the end, the '.' in ng-model saves the day. I find it useful to think about anything left of the dot as a way for Angular to resolve the property through scope inheritance. Without the dot, resolving the property only becomes an issue when we're assigning scope variables (otherwise, lookups are fine, including read-only {{model}} binding expressions).
这篇关于角指令：分离范围内使用NG-模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
