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

Question

我编写了一个指令，它只是用一组嵌套标签替换一个元素。问题是，我希望 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？

Answer 1

尝试尝试 2 进行以下更改：

scope:{
    model:'=ngModel'
}

和

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

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