如何在页面加载上执行AngularJS控制器函数?

目前我有一个Angular.js页面，允许搜索和显示结果。用户单击搜索结果，然后单击返回按钮。我想再次显示搜索结果，但我不知道如何触发搜索执行。细节如下:

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

我如何让搜索功能再次执行，而不需要用户按下“搜索按钮”?如果是jquery，那么我会在documentready函数中执行一个函数。我找不到Angular.js的等价物。

783407 次浏览
小开

试试这个?

$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();

你也可以看看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>
小开

如果你想观察viewContentLoaded DOM对象的变化，然后做一些事情，你可以这样做。使用美元的范围。$on也可以，但不同的是，当你的路由是单页模式时。

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

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

这就是我所做的，而且对我很有效:

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

除非你在使用ui-router。然后是:

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

Dimitri /Mark的解决方案不适合我，但使用美元超时函数似乎工作得很好，以确保您的代码只在标记呈现后运行。

# Your controller, including $timeout


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


$timeout($scope.init)

希望能有所帮助。

小开

当使用$routeProvider时，你可以解析.state并引导你的服务。也就是说，你要加载控制器和视图，只有在解析你的服务之后:

ui-routes

 .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);

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

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


// your code here


});
小开

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

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

你可以使用angular的$window对象:

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

发现Dmitry Evseev的回答很有用。

情况1:单独使用angularJs:
要在页面加载中执行一个方法，你可以在视图中使用ng-init，并在控制器中声明init方法，已经说过不建议使用更重的函数，如angular Docs在ng-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:使用Ionic:
上面的代码可以工作，只要确保视图缓存在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();
}
小开

调用self initialize函数中的初始化方法。

(function initController() {


// do your initialize here


})();

提交答案