AngularJS - 如何根據條件顯示自定義指令

Question

我必須根據某些條件顯示自定義指令（即任務可移動）。我必須僅顯示尚未完成的任務的任務移動屬性。有什麼辦法可以在Angularjs中做到這一點？

HTML代碼：

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

在此先感謝。

Answer 1

您可以進行調整，使您的taskMoveable指令可以觀察分配給它的值。從那裏做一個$eval對taskMoveable屬性的值來得到你的布爾值。

舉個例子：

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

Answer 2

您可以使用ng-if作爲整個元素。像這樣的東西。

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

然後，如果thing.stuff是truthy，那麼div只會在DOM中。