ngtemplateでのモデルのエイリアス

Question

同じテンプレートを異なるモデルで再利用できるように、テンプレートで使用されるモデルのエイリアスを設定したいと思います。たとえば、次のモデルの場合：

member = { 

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

"member"と "children"の両方に "name"プロパティがあります。だから私は、この "名前"プロパティを操作する単一のテンプレートを作成したいと思います。

：

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

後は、このディレクティブの使い方です：

Bind ngInclude to different models

私のようなディレクティブを作成し、示唆したように： 私はこの質問の助けを借りてこれを達成することができました

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

この中に問題がある可能性がありますか？

編集

私はまた、接頭辞にアクセスするには$親を使用することができます。しかし、このきれいなアプローチです。

Answer 1

ディレクティブ定義オブジェクトで 'prefix'を独立スコープ変数として定義し、それを要素属性で参照するだけです。

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> 

Fiddle

Answer 2

汎用テンプレートで使用するための様々なコントローラのプロパティ（例えば、memberとmember.children[0]）にディレクティブのスコープのプロパティをバインドすることができるように、私はあなたを信じています（既に発見したように）分離スコープの構文を使用する必要があります。

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

<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: '&' 
}, 

Fiddle

片道文字列の双方向データバインディング、@に使用=、および0一方向式の場合はです。