如何從指令訪問控制器中的方法

在此指令中，我希望能夠爲ng-repeat上Array中的每個用戶顯示出生月份。我如何從指令訪問控制器中的getBirthMonth（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

所需的結果：姓名：John地址：22無限循環誕生月份：2月

來源

2017-02-21 phil

您只需爲它坐下（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>

來源

2017-02-21 16:29:20

試試這個

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

來源

2017-02-21 16:29:48

我不會鼓勵th尤其是在具有隔離範圍的指令中使用'$ parent'。 –

你所要做的是一個反模式。嘗試在服務中封裝特定的功能。這樣，您就可以重複使用它通過應用程序：

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 
} 

}])

工作的示例：https://plnkr.co/edit/RlSvfNo5qgjblHImYbnc

你並不需要使用NG-初始化，只使用替代功能：

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

嘗試johnpapa的Angular 1風格指南：https://github.com/johnpapa/angular-styleguide/tree/master/a1 - 它產生更好的可讀代碼。

來源

2017-02-21 16:45:50

爲了儘可能恰當地回答你的問題，我已經分叉了你提供的運動員並使其按預期工作。

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

需要注意以下幾點：你可以在你的數據和功能的指令傳遞。我已經在指令中使用了bindToController，以便在DOM中使用現代實踐進行綁定。（有關作用域的詳細信息，請參閱https://github.com/angular/angular.js/wiki/Understanding-Scopes）

更新指令定義是：

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>

我也改變了指令模板位，使用新的controllerAs值，並刪除ngInit

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

來源

2017-02-21 17:05:09

如何從指令訪問控制器中的方法

回答

相關問題