要素をネストされたタグのセットに単純に置き換えるディレクティブを作成しました。問題は、 ngModel を、デフォルトで配置されている外部要素ではなく、最初の内部要素に適用することです。ng-model を強制的に内部要素に適用するにはどうすればよいですか?
最初の試み:
HTML:
<nested-elements ng-model="mymodel"></nested-elements>
指令:
app.directive("nestedElements",function(){
return{
restrict: 'E',
replace: true,
scope:{
ngModel:'='
},
template: '<div class="outer"><div class="inner1">Something</div><div class="inner2"></div></div>'
});
結果:
<div class="outer" ng-model="mymodel"><div class="inner1">Something</div><div class="inner2"></div></div>
私が欲しかったものではありません。ng-model を inner1 div に適用したい。
試行 2:
html:
<nested-elements model="mymodel"></nested-elements>
指令:
app.directive("nestedElements",function(){
return{
restrict: 'E',
replace: true,
scope:{
model:'@'
},
template: '<div class="outer"><div class="inner1" ng-model="{{model}}">Something</div><div class="inner2"></div></div>'
});
結果:
<div class="outer"><div class="inner1" ng-model="{{ model }}">Something</div><div class="inner2"></div></div>
これも明らかに私が望んでいたものではありません。
ng-model を inner1 に適用するにはどうすればよいですか?