2014-09-18 6 views
5

मैं एक साधारण निर्देश बनाया:कोणीय के निर्देश में एक सहायक कार्य कहां रखा जाए?

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: '=' 
     } 
    }; 
}); 

लेकिन वहाँ टेम्पलेट के अंदर एक डुप्लिकेट किए गए जटिल तर्क तो मैं एक समारोह के लिए इसे निकालने के लिए और सिर्फ एक टेम्पलेट से कि समारोह फोन चाहते हैं। मैं इस तरह का कार्य कहां रख सकता हूं और मैं इसे कैसे आमंत्रित कर सकता हूं? क्या मुझे एक समर्पित नियंत्रक बनाना है?

उत्तर

5

लिंक समारोह में:

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

आप सेवाओं की घोषणा इस कोणीय में प्राप्त करने के लिए इस्तेमाल करते हैं। कोणीय डॉक्स (https://docs.angularjs.org/guide/services) से

कोणीय सेवाओं substitutable वस्तुओं है कि एक साथ तार कर रहे हैं निर्भरता इंजेक्शन (डीआई) का उपयोग कर रहे हैं। आप अपने ऐप में व्यवस्थित करने और साझा कोड को व्यवस्थित करने के लिए सेवाओं का उपयोग कर सकते हैं।

0

यहां उपयोग करने वाली विधि को समझने के लिए एक सरल, कॉम्पैक्ट और आसान है।
सबसे पहले, अपने जेएस में एक सेवा जोड़ें।

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; 

    }]); 

फिर, अपने नियंत्रक में, अपने सहायक ऑब्जेक्ट इंजेक्षन और निम्नलिखित की तरह कुछ के साथ किसी भी उपलब्ध समारोह का उपयोग करें:

app.controller('MainCtrl', [ 

'$scope', 
'Helpers', 

function($scope, Helpers){ 

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

}]); 
संबंधित मुद्दे