コントローラ内のメソッドにディレクティブ

Question

をどのようにアクセスしますかこのディレクティブでは、ng-repeatのArray内の各ユーザーの月を表示することができます。どのようにしてコントローラのgetBirthMonth（DOB）メソッドにディレクティブからアクセスできますか？各ユーザーのDOBは、各反復

すなわち

<p ng-repeat="x in customerInfo"> 
    Name: {{x.name}} Address: {{x.address}} 
    <span ng-init="birthMonth = getBirthMonth(DOB)"> {{birthMonth}}</span> 
</p> 

ここ

あるPlunkr中にメソッドの引数として渡されます：https://plnkr.co/edit/6TBqsjDllTCUAPQc9BzL?p=preview

望ましい結果： 名：ジョン住所：22無限ループ 誕生月：2月

Answer 1

サービスを作成すると、（plnkr）：

.service('birthMonth', function() { 
    this.getBirthMonth = function (DOB) { 
     var month = []; 
     month[0] = "January"; 
     month[1] = "February"; 
     month[2] = "March"; 
     month[3] = "April"; 
     month[4] = "May"; 
     month[5] = "June"; 
     month[6] = "July"; 
     month[7] = "August"; 
     month[8] = "September"; 
     month[9] = "October"; 
     month[10] = "November"; 
     month[11] = "December"; 

     var d = new Date(DOB), 
     n = month[d.getMonth()]; 

     return n; // returns monthName i.e February 
    } 
}); 

指令：

.directive('myCustomer', ['birthMonth', function(birthMonth) { 
    return { 
    restrict: 'E', 
    scope: { 
     customerInfo: '=info' 
    }, 
    templateUrl: 'my-customer-plus-vojta.html', 
    link: function (scope) { 
     scope.getBirthMonth = birthMonth.getBirthMonth; 
    } 
    }; 
}]) 

はHTML：

<p ng-repeat="x in customerInfo"> 
    Name: {{x.name}} Address: {{x.address}} 
    <span> {{getBirthMonth(x.DOB)}}</span> 
</p> 

Answer 2

何をしようとするこの

<p ng-repeat="x in $parent.names"> 
    Name: {{x.name}} Address: {{x.address}} 
    <span ng-init="birthMonth = getBirthMonth(DOB)"> {{birthMonth}}</span> 
</p> 

Answer 3

を試してみてくださいアンチパターンです。特定の機能をサービスにカプセル化してみてください。あなたがアプリケーションを介して、それを再利用することができますこの方法は：

angular.module('docsIsolationExample', []) 
    .service('getBirthMonth', [function() { 

return function (DOB) { 
    var month = []; 
    month[0] = "January"; 
    month[1] = "February"; 
    month[2] = "March"; 
    month[3] = "April"; 
    month[4] = "May"; 
    month[5] = "June"; 
    month[6] = "July"; 
    month[7] = "August"; 
    month[8] = "September"; 
    month[9] = "October"; 
    month[10] = "November"; 
    month[11] = "December"; 

    var d = new Date(DOB), 
    n = month[d.getMonth()]; 

    return n; // returns monthName i.e February 
} 

}]) 

作業例：

<span>{{getBirthMonth(x.DOB)}}</span> 

：あなたはNG-INITを使用する必要はありません https://plnkr.co/edit/RlSvfNo5qgjblHImYbnc

は、唯一の代わりに関数を使用します

johnpapaのAngular 1 Style Guide：https://github.com/johnpapa/angular-styleguide/tree/master/a1を試してみてください。

Answer 4

可能な限り適切に質問に答えるために、私はあなたの提供したプランナーをフォークし、期待通りに動作させました。

https://plnkr.co/edit/hN0AYYxLGxpl7e2sWhSw?p=preview

には、いくつかの注意事項： あなたはディレクティブにデータや関数に渡すことができます。私は、DOMのバインディングに最新のプラクティスを使用するために、ディレクティブに対してbindToControllerを使用しました。

restrict: 'E', 
    scope:{}, 
    bindToController: { 
    customerInfo: '=info', 
    calcDob: "&" 
    }, 
    templateUrl: 'my-customer-plus-vojta.html', 
    controller: function(){ 

    }, 
    controllerAs: "$ctrl" 

そしてディレクティブの使用は次のとおりです：

<my-customer info="names" calc-dob="getBirthMonth"></my-customer> 

私もディレクティブのテンプレートを少し変更し、更新されたディレクティブの定義がある

（スコープについての詳細はhttps://github.com/angular/angular.js/wiki/Understanding-Scopesを参照してください）新しいコントローラの値を使用して、ngInitを削除しました。

Name: {{x.name}} Address: {{x.address}}: {{$ctrl.calcDob()(x.DOB)}}