ngModel 在 Transcluded html 中需要 $parent [英] ngModel needs $parent when within Transcluded html
问题描述
我有一个输入字段的指令,它使用嵌入来获取包含在包含 ng-model
属性的指令元素中的元素.在阅读了无数的 SO 问题和 Angular 文档以了解如何让嵌入的 html 中的 ng-model
与指令中的 ng-model
同步后,我终于跌跌撞撞通过一个技巧让它工作.即使用 $parent
,其中 ng-model
在输入字段内.这一切都很好,很花哨,但是,它看起来笨拙/笨拙.
I have a directive for a input field that uses transclusion to take the elements that are enclosed in the directives element which includes an ng-model
attribute. After reading countless SO questions and Angular documentation to find out how to get the ng-model
in the transcluded html to sync with the ng-model
in my directive I finally stumbled stumbled upon a trick to get it to work. That is to use $parent
where the ng-model
is within the input field. This is all fine and dandy, however, it seems clunky/hackish.
此处显示的Plunker:http://plnkr.co/edit/gEje6Z2uuTs9DFPeCZfv
Plunker shown here: http://plnkr.co/edit/gEje6Z2uuTs9DFPeCZfv
我试图通过在我的链接函数中处理嵌入函数来使它更优雅一些:
I tried to make this a little more elegant by messing around with the transclusion function within my link function like so:
```
var transcludedContent, transclusionScope;
transcludeFn(scope, function(clone, scope) {
//headerCtrl.$element.append(clone);
transcludedContent = clone;
transclusionScope = scope;
console.log('scope form: ', scope);
console.log('transclude form: ', clone);
});
```
此外,在这个Plunker中显示:http://plnkr.co/edit/11k9LiA5hyi4xydWBo3H?p=preview
Also, shown in this Plunker: http://plnkr.co/edit/11k9LiA5hyi4xydWBo3H?p=preview
有人会认为嵌入函数将允许您用指令的作用域覆盖嵌入作用域,然后 ng-model
属性将关联并绑定到指令作用域,但是,这事实并非如此.
One would think that the transclusion function would allow you to overwrite the transclusion scope with the scope of your directive then the ng-model
attributes would be associated and bound to the directives scope, however, this is not the case.
尽管 $parent.<ng-model>
确实有效,但它看起来很hackish,并且可能导致错误,例如如果我的指令未与没有父作用域的父作用域一起使用account
对象已定义.
Although, the $parent.<ng-model>
does work, it seems very hackish, and can lead to bugs like if my directive was not used with a parent scope that doesnt have an account
object defined.
推荐答案
有几种方法可以做到这一点.
There are a couple ways of doing that.
1) 使用 =
http://plnkr.co/edit/DxsipWRj0AJe6Yi3bhse
JS:
app.directive('formControl', [function(){
return {
restrict: 'EA',
template: '<div ng-transclude></div>{{account.name}}',
scope: {
account: '='
},
transclude: true,
link: function(scope, element, attrs){
scope.account={};
console.log('SCOPE: ', scope)
}
};
}]);
HTML:
<form-control account='account'>
<label for="name">Enter Name:</label>
<input name="name" ng-model="account.name" \>
</form-control>
2) 使用transclude
函数:
这类似于 ngIf
和 ngRepeat
所做的.ngRepeat
实际上用 $index
和类似的值装饰每个作用域,就像你想用 account
装饰作用域一样.
This is similar to what ngIf
and ngRepeat
do. ngRepeat
actually decorates every scope with $index
and similar values, the same way you want to decorate your scope with account
.
http://plnkr.co/edit/cZjWqIgO23nzc0kMZA57
JS:
app.directive('formControl', ['$animate', function($animate){
return {
restrict: 'EA',
transclude: 'element',
link: function(scope, element, attrs, ctrl, transclude){
//this creates a new scope that inherits from the parent scope
//that new scope will be what you'll be working with inside your
//transcluded html
transclude(function (clone, scope) {
scope.account = {name:'foobar'};
$animate.enter(clone, null, element);
console.log('SCOPE: ', scope)
});
}
};
}]);
HTML:
<form-control>
<label for="name">Enter Name:</label>
<input name="name" ng-model="account.name" \><br>
{{account.name}}
</form-control>
这篇关于ngModel 在 Transcluded html 中需要 $parent的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!