javascript - 在 Controller 中重用 Angular 事件

Question

我使用附加到 Controller 中范围的以下事件:

  $scope.$on('$locationChangeStart', function( event ) {
      var answer = confirm('Are you sure?.')
      if (!answer) {
          event.preventDefault();
      }

如何使该事件逻辑可重用，以便我可以在多个 Controller 中使用它？服务或工厂是出路吗？使用指令并将其作为元素、属性或类附加到相关 View 中是不是更好？我怀疑指令选项轻微违反了关注点分离。

Answer 1

您可以在路由配置中创建一个参数。对于我的示例，needConfirmation。

$routeProvider
  .when('/route1', {
    templateUrl: 'page1.html',
    controller: 'Page1Ctrl'
  })
  .when('/route2', {
    templateUrl: 'page2.html',
    controller: 'Page2Ctrl',
    needConfirmation: true
  })
  .otherwise({
    redirectTo: '/route1'
  });

然后在你的run()阶段:

$rootScope.$on('$routeChangeStart', function (event, next) {
  if (next.needConfirmation) {
    if (!confirm('Are you sure?')) {
      event.preventDefault();
    }
  }
});

这是一个完整的工作示例:

angular.module('demo', ['ngRoute']);

angular.module('demo')
  .config(function ($routeProvider) {
  
    $routeProvider
      .when('/route1', {
        template: '<h1>this is the page 1</h1> <a href="#/route2">go to page 2</a>',
        controller: 'Page1Ctrl'
      })
      .when('/route2', {
        template: '<h1>this is the page 2</h1> <a href="#/route1">go to page 1</a>',
        controller: 'Page2Ctrl',
        needConfirmation: true
      })
      .otherwise({
        redirectTo: '/route1'
      });
  
  });

angular.module('demo')
  .run(function ($rootScope) {
    $rootScope.$on('$routeChangeStart', function (event, next) {
      if (next.needConfirmation) {
        if (!confirm('Are you sure?')) {
          event.preventDefault();
        }
      }
    });
  });

angular.module('demo')
  .controller('Page1Ctrl', function () {
  });

angular.module('demo')
  .controller('Page2Ctrl', function () {
  });

<script src="https://code.angularjs.org/1.3.5/angular.js"></script>
<script src="https://code.angularjs.org/1.3.5/angular-route.js"></script>

<div ng-app="demo">
  <div ng-view></div>  
</div>