$scope.$on('$viewContentLoaded',.. 调用了两次或更多次

Question

例如，我有这样一个简单的片段：

var sampleApp = angular.module('sampleApp', []);
sampleApp.config(['$routeProvider',
  function($routeProvider, $rootScope) {
    $routeProvider.
      when('/AddNewOrder', {
    templateUrl: 'add_order.html',
    controller: 'AddOrderController'
      }).
      when('/ShowOrders', {
    templateUrl: 'show_orders.html',
    controller: 'ShowOrdersController'
      }).
      otherwise({
    redirectTo: '/AddNewOrder'
      });
}]);

sampleApp.controller('AddOrderController', function($scope, $rootScope) {
    $scope.message = 'This is Add new order screen';

    $scope.$on('$viewContentLoaded', function (event, toState, toParams, fromState, fromParams) {
        console.log("Add new order");
    });
    
});

sampleApp.controller('ShowOrdersController', function($scope,$rootScope) {
    $scope.message = 'This is Show orders screen';

    $scope.$on('$viewContentLoaded', function (event, toState, toParams, fromState, fromParams) {
        console.log("Show orders");
    });
});

它是来自 ng 示例的 app.js，在浏览器中它的示例看起来是这样的：

完整版你可以在这里看到：http://plnkr.co/edit/jc3nFBAaBLMiGMYV4TZW?p=preview

哪里有些奇怪：

$scope.$on('$viewContentLoaded', function (event, toState, toParams, fromState, fromParams) {
        console.log("Add new order");

和

$scope.$on('$viewContentLoaded', function (event, toState, toParams, fromState, fromParams) {
            console.log("Show orders");
        });

每次点击链接时调用两次。我也尝试使用$routeChangeSuccess，但结果是一样的。为什么会这样？需要做什么才能获得 $scope.$on(..) 的单次调用？

Answer 1

将您的 href="#AddNewOrder" 更改为 href="#/AddNewOrder"。因此，您的控制器初始化了两次。

$scope.$on('$viewContentLoaded',.. 调用了两次或更多次

$scope.$on('$viewContentLoaded',.. called twice and more times

javascript

angularjs

jquery-events