2014-09-18 15 views
5

Tôi tạo ra một chỉ thị đơn giản:Nơi đặt hàm trợ giúp trong chỉ thị của góc?

angular.module("foo").directive('bar',function(){ 
    return { 
     ... 
     template: 
      '<div> \ 
       <div ng-hide="param1.length == 0 && param2...">...</div> \ 
       <input ng-show="param1.length == 0 && param2..." .../> \ 
      </div>', 
     scope: { 
      param1: '=', 
      param2: '=' 
     } 
    }; 
}); 

nhưng có một logic phức tạp trùng lặp bên trong mẫu vì vậy tôi muốn giải nén nó vào một chức năng và chỉ gọi đó là chức năng từ một bản mẫu. Tôi có thể đặt chức năng như thế nào và tôi có thể gọi nó như thế nào? Tôi có phải tạo một bộ điều khiển chuyên dụng không?

Trả lời

5

Trong chức năng liên kết:

return { 
    ..., 
    template: '<div><div ng-hide="foo()">...</div></div>', 
    link: function(scope) { 
     scope.foo = function() { 
      return scope.param1.length == 0 && ...; 
     }; 
    } 
}; 
0

Bạn sử dụng tuyên bố dịch vụ để đạt được điều này trong góc. Từ tài liệu góc (https://docs.angularjs.org/guide/services)

Dịch vụ góc là các đối tượng thay thế được nối với nhau sử dụng bơm phụ thuộc (DI). Bạn có thể sử dụng dịch vụ để tổ chức và mã chia sẻ trên ứng dụng của mình.

0

Đây là phương pháp đơn giản, nhỏ gọn và dễ hiểu mà tôi sử dụng.
Đầu tiên, thêm dịch vụ vào js của bạn.

app.factory('Helpers', [ function() { 
     // Helper service body 

     var o = { 
     Helpers: [] 

     }; 

     // Dummy function with parameter being passed 
     o.getFooBar = function(para) { 

      var valueIneed = para + " " + "World!"; 

      return valueIneed; 

      }; 

     // Other helper functions can be added here ... 

     // And we return the helper object ... 
     return o; 

    }]); 

Sau đó, trong điều khiển của bạn, tiêm đối tượng helper của bạn và sử dụng bất kỳ chức năng có sẵn với một cái gì đó như sau:

app.controller('MainCtrl', [ 

'$scope', 
'Helpers', 

function($scope, Helpers){ 

    $scope.sayIt = Helpers.getFooBar("Hello"); 
    console.log($scope.sayIt); 

}]); 
Các vấn đề liên quan