如何在页面加载时执行AngularJS控制器功能？

目前，我有一个Angular.js页面，它允许搜索并显示结果。用户单击搜索结果，然后单击“后退”按钮。我希望再次显示搜索结果，但是我不知道如何触发搜索执行。这是细节：

• 我的Angular.js页面是一个搜索页面，带有一个搜索字段和一个搜索按钮。用户可以手动键入查询并按下按钮，然后会触发ajax查询并显示结果。我用搜索词更新了网址。一切正常。
• 用户单击搜索结果，然后转到另一个页面-效果也不错。
• 用户单击“后退”按钮，然后返回到我的角度搜索页面，并显示正确的URL（包括搜索词）。一切正常。
• 我已将搜索字段值绑定到URL中的搜索词，因此它包含了预期的搜索词。一切正常。

如何使搜索功能再次执行而无需用户按下“搜索按钮”？如果是jQuery，那么我将在documentready函数中执行一个函数。我看不到Angular.js等效项。

一方面，如@ Mark-Rajcok所说，您可以使用私有内部函数：

// at the bottom of your controller
var init = function () {
   // check if there is query in url
   // and fire search in case its value is not empty
};
// and fire it after definition
init();

您也可以看看ng-init指令。实现将非常像：

// register controller in html
<div data-ng-controller="myCtrl" data-ng-init="init()"></div>

// in controller
$scope.init = function () {
    // check if there is query in url
    // and fire search in case its value is not empty
};

但是要小心，因为角度文档暗示（自v1.2起）不要ng-init为此使用。但是imo取决于您应用程序的体系结构。

ng-init当我想将后端的值传递到有角度的应用程序时，我用过：

<div data-ng-controller="myCtrl" data-ng-init="init('%some_backend_value%')"></div>

尝试这个？

$scope.$on('$viewContentLoaded', function() {
    //call it here
});

我永远无法$viewContentLoaded为我工作，ng-init实际上应该只用于ng-repeat（根据文档），而且如果代码依赖于尚未定义的元素，则直接在控制器中调用函数也可能导致错误。 。

这是我的工作，对我有用：

$scope.$on('$routeChangeSuccess', function () {
  // do something
});

除非您使用ui-router。然后是：

$scope.$on('$stateChangeSuccess', function () {
  // do something
});

angular.element(document).ready(function () {

    // your code here

});

Dimitri / Mark的解决方案对我不起作用，但是使用$ timeout函数似乎可以很好地确保代码仅在呈现标记后运行。

# Your controller, including $timeout

var $scope.init = function(){
 //your code
}

$timeout($scope.init)

希望能帮助到你。

如果要观看viewContentLoaded DOM对象进行更改，然后执行某些操作，则可以执行此操作。使用$ scope。$ on也可以，但是有所不同，特别是当您在路由上使用一页模式时。

 $scope.$watch('$viewContentLoaded', function(){
    // do something
 });

您可以使用angular的$ window对象：

$window.onload = function(e) {
  //your magic here
}

另一种选择：

var myInit = function () {
    //...
};
angular.element(document).ready(myInit);

（通过https://stackoverflow.com/a/30258904/148412）

如果您有一个仅针对该页面的控制器，则还有另一种选择：

(function(){
    //code to run
}());

使用$ routeProvider时，您可以在.state上解析并引导您的服务。这就是说，只有在解决服务后，您才需要加载Controller和View：

ui路由

 .state('nn', {
        url: "/nn",
        templateUrl: "views/home/n.html",
        controller: 'nnCtrl',
        resolve: {
          initialised: function (ourBootstrapService, $q) {

            var deferred = $q.defer();

            ourBootstrapService.init().then(function(initialised) {
              deferred.resolve(initialised);
            });
            return deferred.promise;
          }
        }
      })

服务

function ourBootstrapService() {

 function init(){ 
    // this is what we need
 }
}

发现Dmitry Evseev的答案很有用。

情况1：单独使用angularJs：
要在页面加载时执行方法，您可以ng-init在视图中使用并在controller中声明init方法，但根据ng-init上的angular Docs的建议，建议不要使用更重的功能：

可以滥用此伪指令在模板中添加不必要的逻辑量。ngInit只有很少的适当用途，例如为ngRepeat的特殊属性起别名，如下面的演示所示；以及通过服务器端脚本注入数据。除了这几种情况，您应该使用控制器而不是ngInit来初始化作用域上的值。

HTML：

<div ng-controller="searchController()">
    <!-- renaming view code here, including the search box and the buttons -->
</div>

控制器：

app.controller('SearchCtrl', function(){

    var doSearch = function(keyword){
        //Search code here
    }

    doSearch($routeParams.searchKeyword);
})

警告：请勿将此控制器用于另一个意图不同的视图，因为这也会导致在该视图中执行搜索方法。

情况2：使用Ionic：
上面的代码将起作用，只需确保在route.jsas中禁用了视图缓存：

route.js

.state('app', {
    url           : '/search',
    cache         : false, //disable caching of the view here
    templateUrl   : 'templates/search.html'   ,
    controller    : 'SearchCtrl'
  })

希望这可以帮助

我遇到了同样的问题，只有这个解决方案对我有用（在加载完整的DOM后运行一个函数）。我使用此滚动来锚定页面加载后：

angular.element(window.document.body).ready(function () {

                        // Your function that runs after all DOM is loaded

                    });

您可以将搜索结果保存在通用服务中，该服务可以在任何地方使用，并且在导航到另一页面时不会清除，然后可以使用保存的数据设置搜索结果，以单击“后退”按钮

function search(searchTerm) {
    // retrieve the data here;
    RetrievedData = CallService();
    CommonFunctionalityService.saveSerachResults(RetrievedData);
} 

为您的后退按钮

function Backbutton() {
    RetrievedData = CommonFunctionalityService.retrieveResults();
}

在自初始化函数中调用初始方法。

(function initController() {

    // do your initialize here

})();