如何在页面加载时执行angular度控制器function?

目前我有一个Angular.js页面,可以search和显示结果。 用户点击search结果,然后点击返回button。 我想要再次显示search结果,但是我不知道如何触发search执行。 这是细节:

  • 我的Angular.js页面是一个search页面,带有一个search栏和一个searchbutton。 用户可以手动键入一个查询,然后按下一个button,然后启动ajax查询并显示结果。 我使用search字词更新url。 这一切工作正常。
  • 用户点击search的结果,并采取不同的页面 – 工作正常。
  • 用户点击返回button,返回到我的angular度search页面,并显示正确的url,包括search词。 一切正常。
  • 我已将search字段值绑定到URL中的search字词,因此它包含预期的search字词。 一切正常。

如何在没有用户按下“searchbutton”的情况下再次执行searchfunction? 如果是jQuery,那么我将执行documentready函数中的一个函数。 我看不到Angular.js的等价物。

一方面,@ Mark-Rajcok说你可以用私人的内在function逃脱:

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

但是请注意, angular度文档暗示(自v1.2以来)不使用ng-init 。 不过,这取决于你的应用程序的体系结构。

当我想从后端传递一个值到angular app时,我使用了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(根据文档),并且直接在控制器中调用一个函数可能会导致错误CodeGo.net,如果代码依赖于尚未定义的元素。

这就是我所做的,对我而言:

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

除非你使用ui-router。 那就是:

 $scope.$on('$stateChangeSuccess', function () { // do something }); 
 angular.element(document).ready(function () { // your code here }); 

Dimitri的/ Mark的解决scheme不适合我,但使用$超时function似乎很好,以确保您的代码只在标记呈现后运行。

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

另一种select:

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

(通过https://stackoverflow.com/a/30258904/148412

当使用$ routeProvider时,你可以在.state上parsing并引导你的服务。 这就是说,只有在解决了你的服务之后,你才会加载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 } } 

发现德米特里Evseev答案相当有用。

案例1:单独使用angularJs:
为了在页面加载时执行一个方法,你可以在视图中使用ng-init并在控制器中声明init方法,并且build议不要使用较重的函数,按照ng-init上的angular度Docs :

该指令可能会被滥用,将不必要的逻辑添加到模板中。 ngInit只有less数几个适当的用法,例如用于重写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); }) 

警告:不要将此控制器用于另一个意图不同的意图,因为它会导致在那里执行search方法。

情况2:使用离子:
上面的代码可以工作,只要确保route.js的视图caching被禁用为:

route.js

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

希望这可以帮助

我有同样的问题,只有这个解决scheme为我工作(它已经加载完整的DOM后运行一个函数)。 我用这个滚动页面加载后锚定:

 angular.element(window.document.body).ready(function () { // Your function that runs after all DOM is loaded }); 

还有另外一种方法,如果你有一个特定于该页面的控制器:

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

您可以将search结果保存在可从任何地方使用的通用服务中,并且在导航到其他页面时不会清除,然后您可以使用保存的数据设置search结果,以便点击后退button

 function search(searchTerm){ //retrieve the data here; RetievedData=CallService(); CommonFunctionalityService.saveSerachResults(RetievedData); } For your backbutton function Backbutton(){ RetievedData=CommonFunctionalityService.retrieveResults(); }