将ng-model移动到指令中的子元素

Question

我写了一个指令，它只是用一组嵌套标签替换元素。问题是，我希望ngModel适用于第一个内部元素，而不是外部，这是默认放置的位置。我如何强制ng模型应用于内部元素？

第一次尝试：

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模型适用于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模型适用于inner1？

Answer 1

尝试尝试2这些变化：

scope:{ 
    model:'=ngModel' 
} 

和

<div class="outer"><div class="inner" ng-model="model">... 

小提琴：http://jsfiddle.net/7zBnC/1/