AngularJS

Question

में पुन: प्रयोज्य घटक मैं AngularJS पर नया हूं और अब तक इसे पसंद करता हूं। एक समस्या मुझे कोई दस्तावेज नहीं मिल रहा है यह है:

मेरे पास आवर्ती एचटीएमएल वाला एक पृष्ठ है, उप श्रेणियों वाले एक श्रेणी पृष्ठ में सभी एक ही HTML टेम्पलेट हैं। मैं वर्तमान में जो कर रहा हूं वह एक ही नियंत्रक है जो सभी जेसन को एक बार में धीमा कर देता है। मैं इसे उप-विचारों में विभाजित करना चाहता हूं (एएसपी.नेट एमवीसी में आंशिक जैसे कुछ) लेकिन प्रत्येक दृश्य इसे प्रारंभ होने पर सेवा के लिए स्वयं का कॉल करेगा। मैं श्रेणी के नाम को पैरामीटर के रूप में पास करना भी चाहूंगा।

ऐसा करने का सबसे प्रभावी तरीका क्या है? मैंने निर्देशों के साथ भी कोशिश की लेकिन मुझे प्रत्येक कॉल के लिए अलग-अलग गुंजाइश रखने में कोई भाग्य नहीं है। अगर आपको अधिक जानकारी चाहिए तो मुझे बताएं।

Answer 1

मैं अंततः इसे हल करने में सक्षम था। यह करने के बाद अपने दस्तावेज़ पढ़ें और

यहाँ चारों ओर खेलने है निर्देश बहुत आसान है:

angular.module('components', []).directive('category', function() { 
return { 
    restrict: 'E', 
    scope: {}, 
    templateUrl: '/Scripts/app/partials/CategoryComponent.html', 
    controller: function ($scope, $http, $attrs) { 
     $http({ 
      url: "api/FeaturedProducts/" + $attrs.catName, 
      method: "get" 
     }).success(function (data, status, headers, config) { 
      $scope.Cat = data; 
     }).error(function (data, status, headers, config) { 
      $scope.data = data; 
      $scope.status = status; 
     }); 

    } 
} 
}); 

कई बार कहा जाता है एक ही घटक के साथ यह इस मुख्य पृष्ठ लेकिन अलग पैरामीटर के साथ

<ul class="unstyled"> 
    <li> 
    <category cat-name="Ultrabooks"></category> 
    </li> 
    <li> 
    <category cat-name="Tablets"></category> 
    </li> 
    <li> 
    <category cat-name="Laptops"></category> 
    </li> 
    <li> 
    <category cat-name="Digital SLR Cameras"></category> 
    </li> 

Categoryकंपोनेंट.html

<a href="#/Categories/{{Cat.CategoryName}}"> 
    <h4>{{Cat.CategoryName}}</h4> 
</a> 
<div ng-switch on="status"> 
    <div ng-switch-when="500" class="alert alert-error"> 
     {{status}} 
     {{data}} 
    </div> 
    <div ng-switch-default> 
     <ul class="unstyled columns"> 
      <li class="pin" ng-repeat="p in Cat.Products"> 
       <a href="#/reviews/{{p.UPC}}"> 
        <h5>{{p.ProductName}}</h5> 
        <img src="{{p.ImageUrl}}"> 
       </a> 
      </li> 
     </ul> 
    </div> 
</div>