Question

我有以下指令：

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标记，但它不起作用。

Answer 1

假设这是逐字的：

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

缺少结束}

Answer 2

至于我，ng-attr根本不起作用，你可以试试这个

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

但即使m.submenu为false，它也将没有值。希望它会有所帮助。

AngularJS有条件地添加自定义“数据切换”属性

2 个答案: