AngularJS - 如何根据条件显示自定义指令

Question

我必须根据某些条件显示自定义指令（即任务可移动）。 我只需要显示尚未完成的任务的任务可移动属性。 我们有什么办法可以在Angularjs做到这一点吗？

HTML代码：

<div class="gantt-body-background" ng-repeat="row in gantt.rows" task-moveable>
  ....
</div>

提前致谢。

Answer 1

你可以使用ng-if作为整个元素。 像这样的东西。

<div class="gantt-body-background" ng-repeat="row in gantt.rows" ng-if="thing.stuff" task-moveable>
  ....
</div>

然后，如果thing.stuff是真的那个div只会在DOM中。

Answer 2

您可以进行调整，以便您的taskMoveable指令可以观察分配给它的值。 从那里对taskMoveable属性的值执行$eval以获取布尔值。

举个例子：

app.directive('taskMoveable', function () {
  return {
    controller: function ($scope, $element, $attrs) {
      $scope.taskMoveable = {};

      $attrs.$observe('taskMoveable', function (value) {
        if (value) {
          $scope.taskMoveable.amIMoveable = $scope.$eval(value);
        }
      });
    },
    template: '<span ng-bind="taskMoveable.amIMoveable"></span>'
  };
});

请参阅我的插件以获取更详细的示例：

http://plnkr.co/edit/0nK4K9j3SmNnz8PgRYfR