Question

我想根据指令中是否有属性editable来启用按钮：

可编辑：

  <table-list items="users" editable></table-list>

不可编辑：

  <table-list items="users"></table-list>

我试过了：

 .directive('tableList', function ($attr) {
    return {
      restrict: 'EA',
      template: '<a ng-if="editable" class="btn btn-default" href="#">Add to group</a>' +
    '<table class="table table-stripped">' +
    '<thead>' +
      '<tr>' +
        '<th>#</th>' +
        '<th>Name</th>' +
        '<th>Users</th>' +
        '<th>Buildings</th>' +
        '<th>Created at</th>' +
      '</tr>' +
    '</thead>' +
    '<tbody>' +
      '<tr ng-repeat="item in items">' +
        '<th scope="row"><input type="checkbox" value="0"></th>' +
        '<td><a href="#/groups/{{item.id}}">{{item.name}}</a></td>' +
        '<td>_</td>' +
        '<td>_</td>' +
        '<td>_</td>' +
      '</tr>' +
    '</tbody>' +
      '</table>',
      scope: {
    items: "=",
    editable: "="
      },

但按钮没有显示。

这样做的正确方法是什么？

Answer 1

如果您只想依赖于属性的存在（即使它设置为false），您可以检查它是否在链接函数中使用$attrs定义：

scope: {
  items: "="
},
link: function($scope, $element, $attrs) {
  $scope.editable = $attrs.editable !== undefined;
}

JSFiddle

但是，这不会被动（即如果你在运行时添加属性，指令不会显示按钮）。如果需要，您可以使用$attrs.$observe()。

Answer 2

只需添加true：

<table-list items="users" editable="true"></table-list>

JSFiddle

Answer 3

获取属性并将其设置为范围时，就像设置值一样。而且您的editable - 属性没有任何价值。如果你做<table-list items="users" editable="true"></table-list>它会更好。

在指令中，您可以使用@代替=作为属性。

这会将范围的editable属性设置为字符串“true”，如果您希望它是布尔值，则可能需要链接函数中的某些逻辑

如何测试指令中属性的存在？

3 个答案: