कोणीय

Question

में ब्रेडक्रंब मैं Angular's breadcrumb capability का उपयोग करना चाहता हूं। मैंने इस जावास्क्रिप्ट फ़ाइल को मेरे सेवा फ़ोल्डर में जोड़ा।

मैंने जावास्क्रिप्ट को कॉल करने के लिए मेरे header.html फ़ाइल में एक div जोड़ा। कोणीय के अनुसार, div इस तरह दिखना चाहिए:

<div> 
    <ul class="breadcrumb"> 
    <li ng-repeat="breadcrumb in breadcrumbs.getAll()"> 
     <span class="divider">/</span> 
     <ng-switch on="$last"> 
     <span ng-switch-when="true">{{breadcrumb.name}}</span> 
     <span ng-switch-default><a href="{{breadcrumb.path}}">{{breadcrumb.name}}</a></span> 
     </ng-switch> 
    </li> 
    </ul> 
</div> 

div बनाया जा रहा है, और जब मैं यह निरीक्षण मैं
<!-- ngRepeat: breadcrumb in breadcrumbs.getAll() -->

लेकिन कोई ब्रेडक्रंब देखते हैं। कोई विचार?

Answer 1

एचटीएमएल को अपने हेडर टेम्पलेट फ़ाइल में जोड़ने के लिए पर्याप्त नहीं है।

1. आपका मुख्य HTML टेम्प्लेट में breadcrumbs.js शामिल करें (आमतौर पर index.html):

   <script type="text/javascript" src="your-project-folder/services/breadcrumbs.js"></script> 
   

2. services.breadcrumbs अपने मुख्य अनुप्रयोग के लिए एक मॉड्यूल निर्भरता के रूप में शामिल करें सुनिश्चित करें कि आप भी पूरा कर दिया है निम्नलिखित हैं:

   angular.module('myMainApp', ['services.breadcrumbs']); 
   

3. अंत में

   , सुनिश्चित करें कि आप वास्तव में अपने नियंत्रक में breadcrumbs सेवा इंजेक्षन, एक बनाने के घ तो $ दायरे में अटैच कर:

   angular.module('myMainApp').controller('FooBarCtrl', function($scope, breadcrumbs) { 
       $scope.breadcrumbs = breadcrumbs; 
   
       // ... other controller logic ... 
   }); 
   

आप कोणीय एप्लिकेशन के अंतर्गत परियोजना in the app.js file (लाइनों 6, 60 को देखें, और 62) में चरण 2 और 3 के कार्यान्वयन देख सकते हैं।