2013-11-22 39 views
8

नहीं दिखा रहा है मुझे एक कोणीय निर्देश के साथ एक छोटी सी समस्या है जो अब काम कर रहा है और मुझे नहीं पता कि क्यों। मुझे लगता है कि यह एक काफी साधारण मुद्दा है जिसे मैं देख रहा हूं, शायद आप मेरी मदद कर सकते हैं।कोणीय निर्देश

निर्देशक इस तरह परिभाषित किया गया है:

angular.module('directives', []) 
    .directive('my-directive', function() { 
     return { 
      restrict: 'AE', 
      scope: { 
       name: '=name' 
      }, 
      template: '<h1>{{name}}</h1>' 
     }; 
    }); 

फिर index.cshtml:

<my-directive name="test"></my-directive> 

Application.js:

var app = angular.module('MyApp', [ 
    ..., 
    'directives' 
]); 

और यहाँ controllers.js

angular.module('controllers', ['apiServices', 'directives']) 
    .controller('homecontroller', function($scope, $resource, webApiService, $log, $translate, $localStorage, $sessionStorage) { 
है

ठीक है पुष्टि की है कि directives.js लोड हो गया है, अन्यथा application.js 'अज्ञात मॉड्यूल' के बारे में nags। कंसोल में कोई त्रुटि संदेश नहीं है, यह चीज़ बस दिखाई नहीं देती है। कोई विचार?


संपादित

तो जैसा कि बताया, मैं निर्देश नाम CamelCase लिए बदल गया है, लेकिन फिर भी प्रयास विफल:

<my-directive name="John Doe"></my-directive> 

और

.directive('myDirective', function() { 

लेकिन कुछ भी नहीं है अभी तक दिखा रहा है

संपादित

समस्या है कि कोणीय उम्मीद एक वस्तु विशेषता, न कोई स्ट्रिंग शाब्दिक में पारित किया जा रहा है। यदि आप ऑब्जेक्ट व्यक्ति = {name: 'John'} बनाते हैं, तो उस व्यक्ति को पास करें, फिर {{person.name}} लिखें (मान लें कि हमने विशेषता व्यक्ति + स्कोप var व्यक्ति भी नाम दिया है)।

उत्तर

19

के दौरान सामान्य, कोणीय धर्मान्तरित - CamelCase को सीमांकित नाम।

तो CamelCase का उपयोग करते हुए जे एस के अंदर निर्देश को निर्दिष्ट: अपने html में तो

.directive('myDirective', function() { 

Fiddle

+0

बहुत बहुत धन्यवाद - इसलिए मैंने इसे बदल दिया, लेकिन अभी भी कोई भाग्य नहीं है। –

+0

क्या आपको कोई त्रुटि दिखाई देती है? क्या आप एक पहेली बना सकते हैं? – AlwaysALearner

+0

यह पहले से ही काफी बड़ा ऐप है, एक पहेली बनाने के लिए सुपर आसान नहीं है। कंसोल में कोई त्रुटि नहीं है। जो ऐप मैंने बनाया और ऐप में चिपकाया (http://jsfiddle.net/QLBga/) फिडलर पर बहुत अच्छा काम करता है। –

4

आपका निर्देश ऊंट मामलों किया जाना चाहिए

.directive('myDirective', function() { 

अपने नि: शुल्क है कि क्या यह कॉल करने के लिए कर रहे हैं my-directive या myDirective

दोनों मान्य हैं

<my-directive name="test"></my-directive> 
<myDirective name="test"></myDirective> 
+0

बहुत बहुत धन्यवाद - इसलिए मैंने इसे बदल दिया, लेकिन अभी भी कोई भाग्य नहीं है। –

7

मुझे यकीन है कि आप इस समझ गए होंगे बाहर पहले से ही कर रहा हूँ, लेकिन अगर आप अपने दायरे परिभाषा बदलने नाम

scope: { 
    name: '@' 
} 

आप तो सक्षम हो जाएगा होने के लिए एक स्ट्रिंग पास करने के लिए। '@' विशेषता को इंटरपोल करता है जबकि '=' इसे बांधता है। इसके अतिरिक्त, यदि आप स्कोप वैरिएबल के समान हैं तो आपको एक विशेषता नाम शामिल करने की आवश्यकता नहीं है।

1

बस इस पर नजर रखने के लिए, मैं अपने निर्देश काम करने के लिए प्राप्त करने के लिए नीचे दिए तरीक़े का इस्तेमाल किया था।

<my-directive name="test"></my-directive> 
6

समस्या निर्देश परिभाषा में प्रतीत होती है। आप अपने प्रश्न में ध्यान देते हैं कि कोणीय वस्तु की अपेक्षा करता है; यह "=" दायरे के लिए सच है, लेकिन "@" दायरे के लिए नहीं। "@" दायरे में, कोणीय केवल एक स्ट्रिंग की अपेक्षा करता है। मैंने नीचे एक स्निपेट बनाया है।

बहुत सारे मॉड्यूल

जब तक आप एक से अधिक आवेदन में निर्देश पुन: उपयोग कर रहे हैं, इसके लिए एक नया मॉड्यूल निर्माण नहीं करतीं। आपके द्वारा एप्लिकेशन के लिए बनाए गए मॉड्यूल को निर्देश परिभाषा जोड़ें। नीचे मेरी उदाहरण में, मैं मॉड्यूल वापस "angular.module (moduleName)" ... जब केवल एक ही तर्क प्रयोग किया जाता है, कोणीय रिटर्न मौजूदा ऑब्जेक्ट का उपयोग कर के बजाय एक नया एक बनाने के द्वारा कहा जाता है। इस प्रकार हम कोड को कई फाइलों में अलग कर सकते हैं।

बातों का ध्यान रखना

आप नीचे दिए गए नोटिस करेंगे:

  1. आप एप्लिकेशन चर में मॉड्यूल लोड करने के लिए की जरूरत नहीं है। प्रत्येक बार सिंगलटन को कॉल करना स्मृति प्रबंधन पर वास्तव में सुरक्षित और आसान है।
  2. निर्देश, ऊंट मामले में है के रूप में आप पहले से ही उल्लेख किया है।
  3. मैं एक स्ट्रिंग मान और नहीं किसी ऑब्जेक्ट को नाम विशेषता सेटिंग कर रहा हूँ; यह "@" स्कोप सेटिंग के कारण काम करता है।
  4. div = 'MyApp' एप्लिकेशन के तहत एनजी को तैयार है। यह आमतौर पर एचटीएमएल तत्व पर सेट होता है, लेकिन मैं स्टैक एक्सचेंज पर डीओएम के साथ गड़बड़ नहीं करना चाहता था। एनजी-एप निर्देश किसी तत्व पर सेट किया जा सकता है, और उस मॉड्यूल से जुड़े निर्देश उन तत्वों पर लागू किए जाएंगे जो उस तत्व के दायरे में हैं। एनजी-ऐप निर्देश के बिना, कोणीय को पता नहीं है कि पेज पर कौन सा मॉड्यूल चलाना है।

//app.js - this defines the module, it uses two parameters to tell the injector what to do. 
 
angular.module('MyApp',[]); 
 

 
//directive.js stored elsewhere 
 
//this calls back the module that has been created. It uses one parameter because the injector is no longer needed. 
 
angular.module('MyApp').directive('myDirective', function() { 
 
     return { 
 
     restrict: 'AE', 
 
      scope: { 
 
      name: '@' 
 
     }, 
 
     template: '<h1>{{name}}</h1>' 
 
     }; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    
 
<div ng-app="MyApp"> 
 
<h1>Successful Load</h1> 
 
<my-directive name="test"></my-directive> 
 
<p>By applying the directive definition to the MyApp module, the MyApp module knows to activate the directive within this scope. In this form, it does not get injected.</p> 
 
</div>

इंजेक्शन

का उपयोग करते हुए जब आप प्रत्येक और हर निर्देश या नियंत्रक के लिए एक अलग मॉड्यूल है, हर एक आवेदन के मॉड्यूल परिभाषा में इंजेक्ट किया जाना चाहिए। यह त्रुटि के लिए बहुत सी जगह छोड़ देता है। सर्वोत्तम अभ्यास के रूप में, केवल आवश्यक होने पर एक नया मॉड्यूल बनाएं, और मॉड्यूल को संबंधित कार्यक्षमता के समूह के लिए एक कंटेनर बनाएं, न कि एक आइटम।

नीचे दिया गया कोड उचित इंजेक्शन दर्शाता है।

angular.module("MyApp", ['ReusableDirectives']); 
 
angular.module("MyApp").directive("myDirective", function(){ 
 
    return { 
 
    restrict: "AE", 
 
    scope: { name: "@" }, 
 
    template: "<p>This is the directive I defined in the example above. It uses <u>the same module</u> as my main application, because it is not going to be reused over and over again. In fact, I will need it just for this application, so I don't need to complicate things with a new module. This directive takes an attribute called 'name' and if it is a string allows me to manipulate the string within my templates scope to do things like this: {{'hello ' + name + '!'}}</p>" 
 
    }; 
 
}); 
 
angular.module("ReusableDirectives", []); 
 
angular.module("ReusableDirectives").directive("reusableDirective", function(){ 
 
    return { 
 
    restrict: "E", 
 
    template: "<p>This is a directive that I intend to use in many, many applications. Because I will reuse it so much, I am putting it in a separate module from my main application, and I will inject this directive. This is the only reason that this directive is not in the same module as the one I defined above.</p>" 
 
    }; 
 
}).directive("reusableDirective2", function(){ 
 
    return { 
 
    restrict: "E", 
 
    template: "<p>This is a second directive that I intend to use in multiple applications. I have stored it in a module with the first directive so that I can freely inject it into as many apps as I like.</p>" 
 
    }; 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="MyApp"> 
 
    <h1>Successful Load</h1> 
 
    <my-directive name="Johnny"></my-directive> 
 
    <p>By applying the directive definition to the MyApp module, the MyApp module knows to activate the directive within this scope. In this form, it does not get injected.</p> 
 
    <h3>Injected Directives</h3> 
 
    <reusable-directive></reusable-directive> 
 
    <reusable-directive2></reusable-directive2> 
 
</div>

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

आपके पास कोणीय के साथ एक उज्जवल भविष्य है, अच्छा काम जारी रखें!

संबंधित मुद्दे