AngularJS有條件地添加自定義「數據切換」屬性

我有以下指令：AngularJS有條件地添加自定義「數據切換」屬性

myDirective.directive('sidebar', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    template: '<li ng-repeat="m in menu" ng-class="{\'dropdown\':m.submenu}">' + 
     '<a href="{{m.url}}" ng-class="{\'dropdown-toggle\':m.submenu}" ng-attr="{\'data-toggle=dropdown\': m.submenu">' + 
     '<i class="{{m.image}}"></i>' + 
     ' {{m.name}}' + 
     '<b class="caret" ng-if="m.submenu"></b>' + 
     '</a>' + 
     '<ul ng-if="m.submenu" class="dropdown-menu">' + 
     '<li ng-repeat="s in m.submenu"><a href="{{s.url}}"><i class="{{s.image}}"></i> {{s.name}}</a></li>' + 
     '</ul>' + 
     '</li>', 

    link: function (scope, elem, attrs) { 
     scope.menu = [ 
     { 
      "name": "Home", 
      "url": "/", 
      "image": "fa fa-bar-chart-o" 
     }, 
     { 
      "name": "Data Integration", 
      "url": "/manage/dataintegration/index", 
      "image": "fa fa-dashboard" 
     }, 
     { 
      "name": "Users", 
      "url": "/manage/users/index", 
      "image": "fa fa-dashboard" 
     }, 
     { 
      "name": "Logger", 
      "url": "/manage/logger/index", 
      "image": "fa fa-dashboard" 
     }, 
     { 
      "name": "Drop", 
      "url": "", 
      "image": "fa fa-dashboard", 
      "submenu": [ 
      { 
       "name": "Logger", 
       "url": "/manage/logger/index", 
       "image": "fa fa-dashboard" 
      }, 
      { 
       "name": "Logger2", 
       "url": "/manage/logger/index", 
       "image": "fa fa-dashboard" 
      } 
      ] 
     } 
     ] 

    } 
    } 
});

我試圖讓data-toggle='dropdown'屬性爲a標籤只有m.submenu存在使用ng-attr但它不」工作。

來源

2013-12-23 Or Weinberger

你能在小提琴/ Plunker中重現這種行爲嗎？ –

您正在使用哪種版本的角？在1.1.4中增加了ng-attr。 –

@GruffBunny我正在使用1.2.2 –

假設這是逐字：

ng-attr="{\'data-toggle=dropdown\': m.submenu"

缺少結束}

來源

2013-12-23 14:19:07

至於我，ng-attr不會在所有的工作，你可以試試這個

ng-attr-data-toggle="{{m.submenu && 'dropdown' || null}}"

但即使m.submenu爲false，屬性也沒有值。希望它會有所幫助。

來源

2013-12-23 14:24:06 IgorCh

AngularJS有條件地添加自定義「數據切換」屬性

回答

相關問題