0

含まれているテンプレート内で行われた変更が指定されたモデルに反映されるように、ngInclude のモデルを指定することは可能ですか。例えば：

私は次のようなモデルを持っています:

$scope.member = {

    name: "Member1",
    children:[
    {
        name:"Child1"
    },
    {
        name:"Child2"
    }
    ]
};

そしてテンプレート：

<script type="text/ng-template" id="name.html">
    <input type="text" ng-model="member.name"/>
</script>

「メンバー」または任意の子のいずれかを ngInclude に渡して、それぞれの名前のプロパティを変更することは可能ですか? ng-model を ng-template に渡そうとしましたが、うまくいきません。意図したモデルでスコープを動的にロードしようとしましたが、モデルが削除された場合、孤立したテンプレートが残ります。以下は、jsfiddle コードです。

http://jsfiddle.net/vaibhavgupta007/p7E5K/

異なるモデルに同じテンプレートを複製するのではなく、テンプレートを再利用したいと考えています。私はこの質問を参照しました：

AngularJSのngIncludeディレクティブにモデルを指定するには?

しかし、ここではモデルは削除されません。

編集

今まで、カスタム ディレクティブを作成する概念を把握していませんでした。しかし、ng-include と組み合わせて新しいディレクティブを作成することは役に立ちますか?

4

1 に答える 1

1

最後の質問の答えは: はい。ディレクティブでは、テンプレートとスコープも定義します。スコープの内容は完全にあなたの手の中にあります。

ここを参照してください：http://jsfiddle.net/vgWQG/1/

使用法：

Member: <member model="member"></member>
<ul>
    <li ng-repeat="child in member.children">
        Child {{$index}}: <member model="child"></member>   
    </li>
</ul>

ディレクティブ:

app.directive('member', function(){
return {
    template : '<input type="text" ng-model="member.name"/>',
    replace : true,
    restrict: 'E',
    scope : {
        'member' : '=model'
    },
    link: function(scope, element, attr) {}
};

});

テンプレートキャッシュをjsfiddleで機能させることができなかったため、テンプレートをインラインバリアントに移動しました。実際には、templateUrl: 'name.html'で問題ありません。

これはあなたが望むものですか？

于 2013-03-29T13:24:44.470 に答える