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有条件地添加自定义“数据切换”属性

回答

相关问题