Attributo di espressione facoltativo nella direttiva AngularJS

Question

Ho una direttiva di navigazione personalizzata che necessita di un attributo "disabilita" facoltativo e non sono sicuro che sia persino possibile.

Nel mio controller principale:

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

}); 

Nella mia direttiva:

.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>' 

    } 

}); 

Nel mio HTML, voglio fare qualcosa di simile:

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

Answer 1

si potrebbe fare ciò che hai un lavoro cambiando la tua chiamata $ eval a

perché è necessario valutare l'espressione contenuta in attrs.disable nell'ambito genitore, non l'ambito isolato della direttiva. Tuttavia, dal momento che stai usando la sintassi '&', valuterà automaticamente l'espressione nello scope genitore. Quindi, basta fare il seguente invece:

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

Fiddle.

Answer 2

Un modo per fare la stessa cosa è questo http://jsfiddle.net/fFsRr/7.

È possibile sostituire il todisableornot="rights[1]" con un'espressione come questa todisableornot="UserService.hasRole('ADMIN,BILLING') && someOtherFn(xxx) || ...".

Ora come Mark Rajcok ha dichiarato che la proprietà todisableornot verrà valutata nell'ambito genitore ogni volta che si chiama tale proprietà. Quindi

<li ng-class="{adminRole:todisableornot()}"><a href="{{href}}" id="{{id}}">{{text}}</a></li> si applica la classe adminRole se la proprietà todisableornot restituisce true (nel contesto dell'ambito principale).

è possibile verificare questo cambiando la

Answer 3

Una più appropriata implementazione per questo specifico problema sarebbe quello di avere un legame opzionale per una semplice proprietà modello che ha il suo valore assegnato dalla sua dichiarazione complessa. La documentazione Angular menziona ripetutamente che la pratica migliore è legarsi alle proprietà del modello e non alle funzioni. L'associazione "&" per le direttive è utile soprattutto per implementare i callback, in cui è necessario passare i dati dalla direttiva al relativo genitore.

Implementazione di un optional sguardi vincolanti come questo:

Codice:

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> 

Fiddle: http://jsfiddle.net/YHqLk/

Answer 4

Recentemente ho affrontato questo problema e ha scoperto che io aveva più riferimenti (tag script) del file direttivo e in index.html. Una volta rimossi questi riferimenti aggiuntivi il problema è svanito.