將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/