AngularJS में वैकल्पिक अभिव्यक्ति विशेषता

Question

निर्देश मुझे लगता है कि एक वैकल्पिक "अक्षम" विशेषता की जरूरत है एक अनुरूप संचालन के निर्देश है, और मुझे यकीन है कि अगर यह भी संभव है नहीं कर रहा हूँ।

अपने मुख्य नियंत्रक में:

.controller('NavCtrl', ['UserResource','RoleResource'], function(UserResource,RoleResource){ 
     var user = UserResource.getUser(); 
     var roles = RoleResource.getRoles(); 
     UserService.init(user, roles); //???? 

}); 

मेरी निर्देश में:

.directive('navItem', function(){ 
    return{ 
     restrict: 'A', 
     scope: { 
      text: '@', 
      href: '@', 
      id: '@', 
      disable: '&' 

     }, 
     controller: function($scope, $element, $attrs){ 
      $scope.disabled = ''; //Not sure I even need a controller here 
     }, 
     replace: true, 
     link: function(scope, element, attrs){ 
      scope.$eval(attrs.disable); 
     }, 
     template: '<li class="{{disabled}}"><a href="{{href}}" id="{{id}}">{{text}}</a></li>' 

    } 

}); 

मेरी HTML में, मैं इस तरह कुछ करना चाहता हूँ:

<div data-nav-item text="My Text" href="/mytemplate.html" id="idx" 
    disable="UserService.hasRole('ADMIN,BILLING') && someOtherFn(xxx) || ..."> 

Answer 1

आप क्या कर सकता है आप

करने के लिए अपने $ eval कॉल chaning द्वारा काम है

scope.$parent.$eval(attrs.disable); 

क्योंकि आप अभिव्यक्ति माता पिता दायरे में attrs.disable में निहित है, न कि निर्देश के अलग दायरे का मूल्यांकन करने की जरूरत है। हालांकि, चूंकि आप '&' वाक्यविन्यास का उपयोग कर रहे हैं, इसलिए यह स्वचालित रूप से मूल दायरे में अभिव्यक्ति का मूल्यांकन करेगा। तो बस इसके बजाय निम्नलिखित करें:

if(angular.isDefined(attrs.disable)) { 
    scope.disable(); 
} 

Fiddle। ही बात कर के

Answer 2

एक तरीका यह http://jsfiddle.net/fFsRr/7 की तरह है।

आप todisableornot="rights[1]" को अपनी अभिव्यक्ति के साथ todisableornot="UserService.hasRole('ADMIN,BILLING') && someOtherFn(xxx) || ..." पर प्रतिस्थापित कर सकते हैं।

अब के रूप में मार्क Rajcok कहा संपत्ति todisableornot माता पिता दायरे में मूल्यांकन किया जाएगा जब भी आप उस संपत्ति कहते हैं। तो

<li ng-class="{adminRole:todisableornot()}"><a href="{{href}}" id="{{id}}">{{text}}</a></li> कक्षा adminRole लागू करेगा यदि todisableornot संपत्ति सत्य (मूल दायरे के संदर्भ में) का मूल्यांकन करती है।

आप इस विशिष्ट समस्या के लिए

Answer 3

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

इस तरह एक वैकल्पिक बाध्यकारी दिखता को लागू:

कोड:

angular.module("testApp", []) 
.controller("testCtrl", ["$scope", function testCtrl($scope) { 
    $scope.myFlag = false; 
}]) 
.directive("testDir", function testDir() { 
    return { 
     restrict: "EA", 
     scope: { 
      identity: "@", 
      optional: "=?" 
     }, 
     link: function testDirLink($scope, $element, $attrs) { 
      if (typeof $scope.optional == "undefined") { 
       $scope.description = "optional was undefined"; 
      } 
      else { 
       $scope.description = "optional = '" + $scope.optional + "'"; 
      } 
     }, 
     template: "<div>{{identity}} - {{description}}</div>" 
    }; 
}); 

HTML:

<div ng-app="testApp" ng-controller="testCtrl"> 
    <test-dir identity="one" optional="myFlag"></test-dir> 
    <test-dir identity="two"></test-dir> 
</div> 

फिडल: http://jsfiddle.net/YHqLk/

Answer 4

हाल ही में मैं इस मुद्दे का सामना किया और पाया कि मैं निर्देश फ़ाइल के कई संदर्भ (स्क्रिप्ट टैग) थे index.html में ई। एक बार जब मैंने इन अतिरिक्त संदर्भों को हटा दिया तो समस्या गायब हो गई।