Angular：页面加载后功能不运行

Question

我有一个运行良好的网页，但在某个路径上，它不会加载某些功能。例如，这是代码：

myApp.controller('people', ['$scope', function($scope) { 

    $scope.$watch('$viewContentLoaded', function(){ 
     console.log('la 1'); 

     $scope.allPeople = function() { 
      // This does not run when refreshed at https://www.website.com/people 
      console.log('la 2'); 
     } 
    }) 
]); 

此具有相同的行为，la 1作品，而不是la 2：

myApp.controller('people', ['$scope', function($scope) { 
    console.log('la 1'); 
    $scope.allPeople = function() { 
     console.log('la 2'); 
    } 
}]); 

这些路线：

myApp.config(function($routeProvider) { 
    $routeProvider 
    .when('/', { 
     templateUrl: '../../templates/all.html', 
     controller: 'all' 
    }) 
    .when('/people', { 
     templateUrl: '../../templates/people.html', 
     controller: 'people' 
    }) 
}); 

当我加载https://www.website.com和导航到People选项卡，它会加载人员列表。但是，当我在People选项卡中加载页面WHILE时，页面将加载，但没有列表：我看到la 1已打印，而不是la 2。

如何在从/people更新时运行allPeople？

Answer 1

原因是你只声明了函数但从未执行它。

myApp.controller('people', ['$scope', function($scope) { 

    $scope.allPeople = function() {   
      console.log('la 2'); 
    } 

    $scope.$watch('$viewContentLoaded', function(){ 
     console.log('la 1');   
     $scope.allPeople(); 
    }); 
]); 

此外，不要每次路由时都声明它。 不要忘记取消注册手表（谢谢@NainishModi）。

myApp.controller('people', ['$scope', function($scope) { 

    $scope.allPeople = $scope.allPeople || function() {   
      console.log('la 2'); 
    } 

    var deReg = $scope.$watch('$viewContentLoaded', function(){ 
     console.log('la 1');   
     $scope.allPeople(); 
    }) 

     //deRegister watch 
     $scope.$on('$destroy', deReg); 
]);