Angularjs：有条件的$on模式？

我必须使用这项服务

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.午餐评估，因为它刚刚评估了午餐状态

因此，我开发了如下控制器：

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

仅当午餐状态尚不可评估时，控制器才需要在该事件上启用侦听器

---

是否有更方便的方法不在所有需要在餐桌上就座的控制器中复制此模板（仅当午餐准备好或准备好时）？

您可以为此创建一个指令，并将其应用于每个页面：

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();
      });
    }]
  }
}

angular.module（'app'）。指令（'sunch'，sunchready）；
函数{
返回{
限制：'E'，
范围：{
isReady:“&”
},
是的，
模板：“”，
控制器：['$scope'，'kitchenService'，函数（$scope，kitchenService）{
if（kitchenService.午餐准备（）==null）{
var deregister=$scope.$root.$on（'KitchenServiceEvent:午餐状态已评估'，函数（）{
if（KitchenService.午餐准备（）
$scope.isReady（）；
});
}否则{
$scope.isReady（）；
}
$scope.$on（“$destroy”，函数（）{
取消注册（&D）取消注册（）；
});
}]
}
}

示例HTML

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

其他代码

谢谢你的建议。我更喜欢保持视图不变的唯一编程解决方案。无论如何，您的解决方案可能是重构增强的第一步。