अपने टेम्पलेट में कोणीय निर्देश विशेषताओं का उपयोग करें

Question

मैं निर्देश में किसी विशेषता के मान का उपयोग कैसे कर सकता हूं? मेरे तत्व इस तरह दिखता है:

<div class="tooltip-icon" 
    data-my-tooltip="click" 
    data-tooltip-title="foo" 
    data-tooltip-content="test content"></div> 

मैं उपयोग करने के लिए है कि मेरे निर्देश का टेम्पलेट है, जो इस तरह दिखता में करना चाहते हैं:

mainApp.directive('myTooltip', 
    function() { 

     // allowed event listeners 
     var allowedListeners = ["click"]; 

     return { 
      restrict: 'A', 
      template: '<div class="tooltip-title">...</div>' + 
         '<div class="tooltip-content">' + 
         '...</div>', 
      link: function(scope, elm, attrs) { 
       if(allowedListeners.indexOf(attrs.myTooltip) != -1){ 
        elm.bind(attrs.myTooltip, function(){ 
         ... 
        }); 
       } 

      } 
     }; 
    } 
); 

कहाँ ट्रिपल डॉट्स वहाँ कोड होना चाहिए रहे हैं, लेकिन मैं उस टेम्पलेट में attrs ऑब्जेक्ट (attrs.tooltipTitle, आदि) की सामग्री कैसे प्राप्त करें, यह पता नहीं लगा सकता है।

Answer 1

आप विशेषताओं बाहर निकालते हैं और उन्हें इस तरह के निर्देश के दायरे में जगह कर सकते हैं:

angular.module('myApp', []). 
directive('myTooltip', function ($log) { 
    // allowed event listeners 
    var allowedListeners = ["click"]; 
    return { 
     restrict: 'A', 
     template: '<div class="tooltip-title">{{tooltipTitle}}</div>' + 
        '<div class="tooltip-content">' + 
        '{{tooltipContent}}</div>', 
     scope: { 
      tooltipTitle: '@tooltipTitle', 
      tooltipContent: '@tooltipContent' 
     }, 
     link: function (scope, elm, attrs) { 
      if (allowedListeners.indexOf(attrs.myTooltip) != -1) { 
       elm.bind(attrs.myTooltip, function() { 
        $log.info('clicked'); 
       }); 
      } 

     } 
    }; 
}); 

यहाँ बेला है: http://jsfiddle.net/moderndegree/f3JL3/

Answer 2

यह सवाल पहले से ही उत्तर दिया गया है, लेकिन मैं मैं अपने कोणीय कोड को भी साझा करने जा रहा हूं, क्योंकि यह एक ऐसा क्षेत्र है जहां कुछ कामकाजी उदाहरण देखने में अक्सर उपयोगी होता है।

मैं कुछ वेबपृष्ठ हों, अपने स्वयं के कोणीय नियंत्रक के साथ प्रत्येक, और मैं एक "कृपया प्रतीक्षा करें" प्रत्येक पृष्ठ, जो प्रकट होता है जब किसी भी पृष्ठ को कहा जाता है पर पॉपअप के लिए एक तरह से चाहता था एक HTTP GET या POST वेब सेवा।

ऐसा करने के लिए, मेरे प्रत्येक वेबपृष्ठ इस लाइन में शामिल हैं:

<please-wait message="{{LoadingMessage}}" ></please-wait> 

... जो कि पेज के नियंत्रक में एक $scope के लिए बाध्य है ...

$scope.LoadingMessage = "Loading the surveys..."; 

यहां मेरे <please-wait> निर्देश के लिए कोड है:

myApp.directive('pleaseWait', 
    function ($parse) { 
     return { 
      restrict: 'E', 
      replace: true, 
      scope: { 
       message: '@message' 
      }, 
      link: function (scope, element, attrs) { 
       scope.$on('app-start-loading', function() { 
        element.fadeIn(); 
       }); 
       scope.$on('app-finish-loading', function(){ 
        element.animate({ 
         top: "+=15px", 
         opacity: "0" 
        }, 500); 
       }); 
      }, 
      template: '<div class="cssPleaseWait"><span>{{ message }}</span></div>' 
     } 
    }); 

ध्यान दें कि यह message विशेषता ({{LoadingMessage}} इस उदाहरण में) को कैसे उठाता है और निर्देशक के टेम्पलेट में इसका मूल्य प्रदर्शित कर सकता है।

(यह वास्तव में मेरा उत्तर का ही हिस्सा है जो सीधे इस सवाल का जवाब है, लेकिन पर पढ़ें, कुछ और tips'n'tricks के लिए ...)

अब, शांत हिस्सा है कि में से प्रत्येक मेरी जब भी वह वेब सेवा से किसी भी डेटा को लोड या सहेजना चाहता है तो नियंत्रक एक कोणीय डेटा सेवा कहते हैं।

$scope.LoadAllSurveys = function() { 
     DataService.dsLoadAllSurveys($scope).then(function (response) { 
      // Success 
      $scope.listOfSurveys = response.GetAllSurveysResult; 
     }); 
    } 

dsLoadAllSurveys समारोह इस तरह दिखता है ...

myApp.webServicesURL = "http://localhost:15021/Service1.svc"; 

myApp.factory('DataService', ['$http', 'httpPostFactory', 'httpGetFactory', 
    function ($http, httpPostFactory, httpGetFactory) { 

     var dsLoadAllSurveys = function (scope) 
     { 
      // Load all survey records, from our web server 
      var URL = myApp.webServicesURL + "/getAllSurveys"; 
      return httpGetFactory(scope, URL); 
     } 

     return { 
      dsLoadAllSurveys: dsLoadAllSurveys 
     } 
    }]); 

और, महत्वपूर्ण बात, सभी "GET" वेब सेवा कॉल निम्नलिखित समारोह, जो हमारे लिए नियंत्रण कृपया प्रतीक्षा करें प्रदर्शित करता है के माध्यम से जाना .. जब सेवा पूरी हो जाती है तो इसे दूर कर देता है।

myApp.factory('httpGetFactory', function ($http, $q) { 
    return function (scope, URL) { 
     // This Factory method calls a GET web service, and displays a modal error message if something goes wrong. 
     scope.$broadcast('app-start-loading');   // Show the "Please wait" popup 

     return $http({ 
      url: URL, 
      method: "GET", 
      headers: { 'Content-Type': undefined } 
     }).then(function (response) { 
      scope.$broadcast('app-finish-loading');  // Hide the "Please wait" popup 
      if (typeof response.data === 'object') { 
       return response.data; 
      } else { 
       // invalid response 
       return $q.reject(response.data); 
      } 
     }, function (errorResponse) { 
      scope.$broadcast('app-finish-loading');  // Hide the "Please wait" popup 

      // The WCF Web Service returned an error. 
      // Let's display the HTTP Status Code, and any statusText which it returned. 
      var HTTPErrorNumber = (errorResponse.status == 500) ? "" : "HTTP status code: " + errorResponse.status + "\r\n"; 
      var HTTPErrorStatusText = errorResponse.statusText; 

      var message = HTTPErrorNumber + HTTPErrorStatusText; 

      BootstrapDialog.show({ 
       title: 'Error', 
       message: message, 
       buttons: [{ 
        label: 'OK', 
        action: function (dialog) { 
         dialog.close(); 
        }, 
        draggable: true 
       }] 
      }); 

      return $q.reject(errorResponse.data); 
     }); 
    }; 
}); 

मैं इस कोड के बारे में क्या प्यार इस एक समारोह को प्रदर्शित करने के बाद/"कृपया प्रतीक्षा करें" पॉपअप छुपा लग रहा है कि है, और एक त्रुटि तब होती है, तो यह भी त्रुटि संदेश (उत्कृष्ट BootstrapDialog लाइब्रेरी का उपयोग कर प्रदर्शित करने के बाद लग रहा है), त्रुटि परिणाम को वापस कॉलर पर वापस करने से पहले।

बिना फैक्ट्री फ़ंक्शन, प्रत्येक बार मेरे कोणीय नियंत्रकों में से एक वेब सेवा कहलाएगा, इसे दिखाने की आवश्यकता होगी, फिर "कृपया प्रतीक्षा करें" नियंत्रण छुपाएं, और त्रुटियों की जांच करें।

अब, मैं सिर्फ अपनी वेब सेवा को कॉल कर सकते हैं और यह छोड़ उपयोगकर्ता को सूचित करने के लिए कुछ गलत हो जाता है, अन्यथा मैं यह सब काम किया है यह मान सकते हैं, और परिणाम की प्रक्रिया।

इससे मुझे बहुत आसान कोड मिल सकता है। याद रखें कि कैसे मुझे लगता है कि वेब सेवा कहा जाता है:

DataService.dsLoadAllSurveys($scope).then(function (response) { 
     // Success 
     $scope.listOfSurveys = response.GetAllSurveysResult; 
    }); 

कि कोड लगता है जैसे कि यह किसी भी त्रुटि हैंडलिंग नहीं कर रहा है, जबकि वास्तव में, यह सब एक ही स्थान पर पर्दे के पीछे के बाद देखा है।

मुझे अभी भी कोणीय के साथ कारखानों और डेटा सेवाओं की लटका मिल रही है, लेकिन मुझे लगता है कि यह एक शानदार उदाहरण है कि वे कैसे मदद कर सकते हैं।

आशा है कि यह समझ में आया, और मदद करता है।