AngularJS条件性地添加自定义"data-toggle"属性

3

我有以下指令:

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"
            }
          ]
        }
      ]

    }
  }
});

我正在尝试使用ng-attr,仅在m.submenu存在时将data-toggle='dropdown'属性添加到a标签,但它无效。请注意保留HTML标记。

1
你能在 Fiddle / Plunker 中重现这个行为吗? - Maxim Shoustin
1
你使用的是哪个版本的Angular?ng-attr是在1.1.4中添加的。 - Gruff Bunny
@GruffBunny 我正在使用1.2.2版本。 - Or Weinberger
2个回答

1
假设这是逐字逐句的:


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

缺少一个闭合的}

0
关于我而言,ng-attr 根本不起作用,你可以尝试这个。
ng-attr-data-toggle="{{m.submenu && 'dropdown' || null}}"

但是即使m.submenu为false,它也会返回没有值的属性。希望这可以帮到你。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接