Angularjs：条件$的模式？

Question

我必须要使用这项服务

angular.service('KitchenService', function(){ 
    this.lunch = { 
     status : null, 
     ... 
    }; 

    this.lunchIsReady = function(){ 
     if(typeof this.lunch.status === "undefined") 
      return null; 
     else    
      return this.lunch.status; 
    } 

    this.lunchEvaluated = function(lunchStatus){ 
     this.lunch.status = lunchStatus; 
     $scope.$root.$emit('KitchenServiceEvent:lunch-status-evaluated'); 
    } 
}); 

在某个时间，某个组件可以称之为this.lunchEvaluated因为它刚刚评估午餐状态。

所以我发展我的控制器，因为这：

... 
if(KitchenService.lunchIsReady() == null) 
    $scope.$root.$on('KitchenServiceEvent:lunch-status-evaluated', function(){ 
     if(KitchenService.lunchIsReady()) 
      takeASeatAtTheTable(); 
    }); 
else 
    if(KitchenService.lunchIsReady()) 
     takeASeatAtTheTable(); 
... 

控制器需要启用该事件侦听器只有在午餐资格尚未可评估。

是否有一种更方便的方法，不需要在所有需要在餐桌旁就餐的控制器中复制此模板，只有在午餐准备就绪或准备就绪后才能使用？

Answer 1

你可以为这个，你可以应用到每个页面创建指令：

JS

angular.module('app').directive('lunch', lunchReady); 

function lunchReady() { 
    return { 
    restrict: 'E', 
    scope: { 
     isReady: '&' 
    }, 
    transclude: true, 
    template: '<div ng-transclude></div>', 
    controller: ['$scope', 'kitchenService', function($scope, kitchenService) { 
     if (kitchenService.lunchIsReady() == null) { 
     var deregister = $scope.$root.$on('KitchenServiceEvent:lunch-status-evaluated', function() { 
      if (KitchenService.lunchIsReady()) 
      $scope.isReady(); 
     }); 
     } else { 
     $scope.isReady(); 
     } 

     $scope.$on('$destroy', function() { 
     deregister && deregister(); 
     }); 
    }] 
    } 
} 

样本HTML

<div ng-controller="MyController as vm"> 
    <lunch is-ready="vm.lunchReady()"> 
    other code 
    </lunch> 
</div>