गतिशील रूप से जोड़ने कोणीय निर्देशों

Question

मैं काफी कोणीय जे एस के लिए नया हूँ और यह एक खड़ी सीखने की अवस्था लग रहा है, मैं महसूस कर रही im वास्तव में यहाँ बात को अनदेखा कर लेकिन यहाँ जाता है मिलती है:

मैं के लिए एक निर्देश जोड़ना चाहते हैं मेरे एक नियंत्रक से पेज। इसलिए मैंने सोचा कि क्या मैं पृष्ठ पर निर्देश टैग जोड़ता हूं, निर्देश और संबंधित नियंत्रक/टेम्पलेट इत्यादि इसके साथ जुड़ जाते हैं। $ संकलन विधि के बारे में पढ़ने के बाद, मैंने सोचा कि इसका उपयोग इस निर्देश को अपने नए बनाए गए टैग पर बाध्य करने के लिए किया जाएगा। इस भाग को नीचे टिप्पणी की गई है, लेकिन इसके साथ या इसके बिना, मुझे लॉगिन करने के लिए लॉगिन शब्द और इसके नियंत्रक को नियंत्रित करने की आवश्यकता है?

मुझे वेब पर समान टैग के कई उदाहरण मिल सकते हैं जब निर्देश टैग लोड समय पर पृष्ठ पर होता है, और उन्हें ठीक काम करने के लिए मिल सकता है, इसलिए यह सोच रहा है कि यह $ संकलन विधि से संबंधित है - मैं क्या खो रहा हूँ?

HTML:

<div ng-app="application" ng-controller="myController"></div> 

जे एस:

var myApp = angular.module('application', []); 

myApp.controller('myController', ['$scope', function($scope) { 

     function showLoginDirective() { 
      $scope.login = angular.element(document.createElement('login')); 

      angular.element(document.body).append($scope.login); 
     }; 

     showLoginDirective(); 
    } 
]); 

angular.module('directives', []) 
    .directive('login', function($compile) { 
     return { 
      restrict: 'E', 
      controller: 'LoginController', 
      template: '<div>login</div>', 
      link: function(scope, element, attrs) { 
       //$compile(element.contents())(scope.$new); 
       console.log('should I not have a div containing login controlled by loginController at this point?'); 
      } 
     }; 
}); 

ऊपर कोड भी यहाँ है: http://jsfiddle.net/d5n6L/7/

Answer 1

आप वास्तव में नहीं गतिशील कोणीय साथ पृष्ठ पर तत्वों को जोड़ने की जानी चाहिए। बहुत से लोग, स्वयं शामिल हैं, जो एक jQuery पृष्ठभूमि से आते हैं, मान लें कि हम इस अभ्यास के साथ जारी रख सकते हैं और पेज पर चीजों को जोड़ सकते हैं क्योंकि हमें उनकी आवश्यकता है।

हालांकि, कोणीय के साथ, तर्क वास्तव में मार्कअप में दिखाई देना चाहिए। इसका क्या मतलब है? आपके मामले में, आपके पास निर्देश होना चाहिए कि इससे कोई फर्क नहीं पड़ता, और फिर ng-show या ng-hide या ng-class के साथ इसकी दृश्यता को नियंत्रित करें।

तो, कुछ इस तरह सबसे अच्छा होगा:

<login ng-show="showLogin"></login> 

और फिर आप के रूप में आप के लिए प्रोग्राम अपने निर्देश का उपयोग कर सकते हैं।

ध्यान दें कि आप एक इनलाइन नियंत्रक को भी परिभाषित कर सकते हैं (निर्भरताओं की एक सरणी असाइन कर सकते हैं और उन निर्भरताओं का एक कार्य controller आपके निर्देश की संपत्ति के रूप में)। यह सभी संबंधित कोड एक ही स्थान पर रखता है।

जैसे,

angular.module('directives', []) 
    .directive('login', function($compile) { 
     return { 
      restrict: 'E', 
      controller: ['$scope', function($scope) { 

       function showLoginDirective() { 
        $scope.showLogin = true; 

       }; 

       showLoginDirective(); 
       } 
      ], 
      template: '<div>login</div>', 
      link: function(scope, element, attrs) { 
       //$compile(element.contents())(scope.$new); 
       console.log('should i not have a div containing login controlled by loginController at this point?'); 
      } 
     }; 
}); 

Answer 2

के बजाय अपने नियंत्रक के भीतर से गतिशील संकलन मैं तुम्हें एनजी-यदि करने के लिए उपयोग का सुझाव घोषणात्मक रूप से व्यक्त करें कि डीओएम तत्वों को डीओएम पर मौजूद होना चाहिए।

एचटीएमएल

<div ng-app="application" ng-controller="myController"> 
    <div ng-if="showLogin" login></div> 
</div> 

जे एस

var myApp = angular.module('application', []); 

myApp.controller('myController', ['$scope', function($scope) { 

     function showLoginDirective() { 
      $scope.showLogin = true; 
     }; 

     showLoginDirective(); 
    } 
]); 

angular.module('directives', []) 
    .directive('login', function($compile) { 
     return { 
      restrict: 'E', 
      controller: 'LoginController', 
      template: '<div>login</div>', 
      link: function(scope, element, attrs) { 
       //$compile(element.contents())(scope.$new); 
       console.log('should i not have a div containing login controlled by loginController at this point?'); 
      } 
     }; 
}); 

Answer 3

मैं एक नियंत्रक से मेरा पेज के लिए एक निर्देश जोड़ना चाहते हैं।

आपको $ स्कोप पर एक बूलियन वैरिएबल परिभाषित करने में सक्षम होना चाहिए जो यह निर्धारित करता है कि लॉगिन दिखाना है या नहीं।

$scope.loginShouldBeShowing = false; 
$scope.showLogin = function() { 
    $scope.loginShouldBeShowing = true; 
}; 

फिर आप टेम्पलेट में इसका उपयोग कर सकते ngIf निर्देश के साथ, के लिए एक ही लॉगिन टेम्पलेट दिखाने के इस चर सच

<login ng-if="loginShouldBeShowing"></login> 

आपको कम से अपने संशोधित JSFiddle में देख सकते हैं करने के लिए सेट किया गया है

http://jsfiddle.net/jK9zr/2/

मैं भी एक बटन जोड़ दिया है तो आप कंसोल कि link समारोह केवल afte के बाद चलता है में देख सकते हैं आर आप ऐसा बटन दबाते हैं, और loginShouldBeShowingtrue

मैं वेब के आसपास समान के उदाहरण के बहुत सारे पा सकते हैं जब निर्देश टैग लोड करते समय पृष्ठ पर है करने के लिए सेट हो जाता है, और उन ठीक काम करने के लिए प्राप्त कर सकते हैं, यह वह जगह है क्या कर रही है लगता है कि यह $ संकलन विधि

मेरी समझ और पिछले उपयोग से संबंधित है, यह टेम्पलेट में निर्देशों है कि केवल कुछ स्थितियों में उपयोग किया जाता है, यानी जब कुछ $ गुंजाइश चर हैं शामिल करने के लिए पूरी तरह से सामान्य है ngIf का उपयोग करके, कुछ मानों पर सेट करें, या शायद ngSwitch या ngShow। मुझे लगता है कि अगर आप किसी भी समय टेम्पलेट के हर हिस्से को संकलित करने की कोशिश करते हैं तो चीजें जल्द ही बहुत गन्दा हो जाएंगी। हालांकि मैं केवल AngularJS में एक रिश्तेदार शुरुआत कर रहा हूँ, अब तक मैं ही कभी, $ उपयोग करने के लिए संकलन जब कस्टम निर्देशों की विशेषताओं का मूल्यांकन किया है तो

<login after-login="doThisFunction()"></login> 

तो $ का उपयोग एक पर doThisFunction() कॉल करने के लिए संकलित करने के लिए आवश्यकता हो सकती है उचित बिंदु

एक छोटी साइडबार के रूप में, आपके चर के नाम थोड़ा कह रहे हैं कि नियंत्रक में, आप टेम्पलेट में क्या हो रहा है इसके बारे में चिंतित हैं। नियंत्रक में किसी प्रकार का मॉडल/व्यवसाय "स्थिति" रखना सामान्य बात है, और फिर टेम्पलेट में उपयुक्त चीज़ दिखाएं। तो तुम नियंत्रक में हो सकता है:

$scope.loginState = 'loggedOut'; 

और फिर टेम्पलेट में:

<login ng-if="loginState == 'loggedOut'"></login> 

संपादित करें: मैं यह भी देखा कि लॉगिन निर्देश एप्लिकेशन के आराम करने के लिए एक अलग मॉड्यूल में था। मुझे संदेह है कि इससे समस्याएं आईं, इसलिए मैंने अपने JSFiddle में उस पहलू को संशोधित किया, इसलिए केवल एक मॉड्यूल था।

संपादित करें: मुझे लगता है कि मैं $ संकलन और $ पार्स के बीच उलझन में हूं, इसलिए मैं $ संकलन के उपयोग के बारे में दस्तावेज़/अन्य स्रोतों के खिलाफ जांच करूंगा।