5

同じテンプレートを別のモデルに再利用できるように、テンプレートで使用されるモデルにエイリアスを設定したいと考えています。たとえば、次のモデルでは:

member = {

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

「メンバー」と「子」の両方に「名前」プロパティがあります。したがって、この「名前」プロパティを操作する単一のテンプレートを作成したいと考えています。私はこの質問の助けを借りてこれを達成することができました:

ngInclude を異なるモデルにバインドする

提案どおり、次のようなディレクティブを作成しました。

app.directive('member', function(){
return {
    restrict: 'A',
    template: "{{prefix}}<input type='text' ng-model='member.name'>",
    scope: {
        member: "="
    }
};
});

このディレクティブの使用法は次のとおりです。

<div ng-controller="MemberCtrl">
    {{member | json}}
    <div member="member"></div>
    <div member="member.children[0]"></div>
</div>

テンプレートの再利用を実現できましたが、ディレクティブで「スコープ」を使用しているため、コントローラー スコープのプロパティにアクセスできない分離スコープが作成されました。したがって、コントローラーの場合：

app.controller('MemberCtrl', function($scope){
$scope.member = {

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

    $scope.prefix = "Mr.";
});

ディレクティブ内のテンプレートは、「プレフィックス」プロパティにアクセスできません。以下はjsfiddleです：

http://jsfiddle.net/vaibhavgupta007/mVBaC/1/

これで何が問題になる可能性がありますか？

編集

$parent を使用してプレフィックスにアクセスすることもできます。しかし、これはクリーンなアプローチです。

4

2 に答える 2

1

ディレクティブ定義オブジェクトで「プレフィックス」を分離スコープ変数として定義し、要素属性で参照するだけです。

app.directive('member', function(){
return {
    restrict: 'A',
    template: "{{prefix}}<input type='text' ng-model='member.name'>",
    scope: {
        member: "=",
        prefix: "="
    }
};
});

 

<div ng-controller="MemberCtrl">
    {{member | json}}
    <div member="member" prefix="prefix"></div>
    <div member="member.children[0]" prefix="prefix"></div>
</div>

フィドル

于 2013-03-31T21:34:06.523 に答える
0

member汎用テンプレートで使用するために、ディレクティブ スコープ プロパティをさまざまなコントローラー プロパティ (たとえば、 and )にバインドできるようにするmember.children[0]には、isolate スコープ構文を使用する必要があると思います (既に発見したように)。

「分離スコープの道」をたどると、ディレクティブが追加の属性としてアクセスする必要があるすべてのコントローラーのプロパティと関数を指定する必要があります。

<div member="member" prefix="{{prefix}}" join-fn="joinNameWithPrefix(someName)"></div>

次に、ディレクティブで：

template: "{{prefix}}<input type='text' ng-model='member.name'>"
   + "<br>fn result={{ joinFn( {someName: member.name} ) }}",
scope: {
  member: "=",
  prefix: '@',
  joinFn: '&'
},

フィドル

=双方向のデータバインディング、@一方向の文字列、および&一方向の式に使用します。

于 2013-04-01T16:44:33.057 に答える