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

目前，我有一个Angular.js页面，允许搜索和显示结果。用户单击搜索结果，然后单击返回按钮。我希望再次显示搜索结果，但我无法确定如何触发搜索执行。详情如下：

• My Angular.js页面是一个搜索页面，包含一个搜索字段和一个搜索 按钮用户可以手动键入查询并按下按钮和 启动ajax查询并显示结果。我用搜索词更新URL。一切正常
• 用户点击一个搜索结果，并被带到另一个页面-这也很好
• 用户单击“上一步”按钮，返回“我的角度搜索”页面，并显示正确的URL，包括搜索词。一切正常
• 我已将搜索字段值绑定到URL中的搜索词，因此它包含预期的搜索词。一切正常

如何让搜索功能在用户不必按下“搜索按钮”的情况下再次执行？如果是jquery，那么我将在documentready函数中执行一个函数。我看不到Angular.js的等效项。

试试这个

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

---

一方面，正如@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();

您还可以查看指令。实施将非常类似于：

// 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
};

---

如果希望观察viewContentLoaded DOM对象的更改，然后执行某些操作，则可以执行此操作。使用$scope.$on也可以，但效果不同，尤其是当您在路由上使用单页模式时

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

---

我永远无法让

$viewContentLoaded

为我工作，而且

ng init

实际上应该只用于

ng repeat

（根据文档），如果代码依赖于尚未定义的元素，则直接在控制器中调用函数可能会导致错误

这就是我所做的，对我来说很有用：

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

除非您使用的是

ui路由器

。然后是：

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

---

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

# Your controller, including $timeout

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

$timeout($scope.init)

---

希望有帮助。

使用$routeProvider时，您可以在上解析。状态和引导您的服务。也就是说，只有在解决服务问题后，才能加载控制器和视图：

用户界面路由

 .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
 }
}

另一种选择：

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

---

（via）

如果您有一个特定于该页面的控制器，则还有另一种选择：

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

---

可以使用angular的$window对象：

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

---

发现Dmitry Evseev的答案非常有用

案例1：单独使用angularJs:
要在页面加载时执行方法，您可以在视图中使用

ng init

，并在控制器中声明init方法，但不建议使用更重的函数，如下所示：

此指令可能被滥用，以便在模板中添加不必要的逻辑量。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：使用离子：
上面的代码可以工作，只需确保在

route.js

中禁用视图缓存，如下所示：

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

})();

---

您是否正在使用

$routepProvider

？使用它连接到应用程序中为搜索结果提供数据的服务。不要像jQuery那样在

文档中思考。ready

术语。如果不透露你目前的搜索方式，很难帮上大忙。谢谢你的回复，但德米特里的回答与我要找的完全吻合。进一步的研究似乎建议不要使用$viewContentLoaded，因为用例是不同的。我也一直在使用马克的方法。对于我的用例来说，这是一个完美的解决方案。我们需要自动选择文本以鼓励用户复制它。该页面可以多次重新加载/访问，因此$viewContentLoaded完全匹配。谢谢是否可能执行多次？我得到了一个行为，似乎是模仿…这一个不适合我，但$scope。$watch工作。主要区别是什么？@Duke，你不能把init（）函数的内容放在控制器的底部吗？也就是说，为什么需要使用ng init并具有init（）函数？当用户点击后退按钮时，我假设您正在切换视图，因此会创建并执行一个新的

myCtrl

控制器。当此解决方案工作时，我投了反对票，因为ng init文档建议不要这样做。具体来说，“ngInit的唯一适当用途是为ngRepeat的特殊属性别名，如下面的演示所示。除此之外，您应该使用控制器而不是ngInit来初始化作用域上的值。”控制器是在html就位后实例化的。如果控制器在其他页面中重用，但您只想在特定页面上启动它，该怎么办？@RobertoLinares我个人认为指令是可重用功能的更好位置。您可以有一个带有init参数的指令：

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

(function initController() {

    // do your initialize here

})();