367

目前我有一个允许搜索和显示结果的 Angular.js 页面。用户单击搜索结果,然后单击返回按钮。我希望再次显示搜索结果,但我不知道如何触发搜索执行。这是详细信息:

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

如何在无需用户按下“搜索按钮”的情况下再次执行搜索功能?如果是 jquery,那么我将在 documentready 函数中执行一个函数。我看不到 Angular.js 的等价物。

4

14 回答 14

435

一方面,正如@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当我想将一个值从后端传递到 Angular 应用程序时,我使用过:

<div data-ng-controller="myCtrl" data-ng-init="init('%some_backend_value%')"></div>
于 2013-03-17T16:22:59.207 回答
136

试试这个?

$scope.$on('$viewContentLoaded', function() {
    //call it here
});
于 2013-03-17T08:52:06.247 回答
60

我永远无法$viewContentLoaded为我工作,ng-init实际上应该只用于ng-repeat(根据文档),并且如果代码依赖于尚未定义的元素,直接在控制器中调用函数也会导致错误.

这就是我所做的,它对我有用:

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

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

$scope.$on('$stateChangeSuccess', function () {
  // do something
});
于 2014-08-15T20:39:41.127 回答
47
angular.element(document).ready(function () {

    // your code here

});
于 2015-06-26T00:54:29.883 回答
32

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

# Your controller, including $timeout

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

$timeout($scope.init)

希望能帮助到你。

于 2014-09-30T12:30:40.033 回答
28

如果你想观察 viewContentLoaded DOM 对象的变化然后做一些事情,你可以这样做。使用 $scope.$on 也有效,但不同的是,尤其是当您在路由上使用一页模式时。

 $scope.$watch('$viewContentLoaded', function(){
    // do something
 });
于 2014-02-13T00:27:54.313 回答
20

您可以使用 Angular 的 $window 对象:

$window.onload = function(e) {
  //your magic here
}
于 2015-11-19T17:59:24.950 回答
4

另一种选择:

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

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

于 2015-06-17T08:25:56.987 回答
3

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

用户界面路由

 .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
 }
}
于 2015-01-23T17:32:23.763 回答
3

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

(function(){
    //code to run
}());
于 2015-09-01T15:44:19.333 回答
3

发现 Dmitry Evseev 的回答非常有用。

案例 1:单独使用 angularJs:
要在页面加载时执行方法,您可以在视图中使用并在控制器中声明 init 方法,但根据 ng-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.jsas中被禁用:

路由.js

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

希望这可以帮助

于 2016-04-15T05:35:00.643 回答
3

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

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

                        // Your function that runs after all DOM is loaded

                    });
于 2016-09-15T10:34:38.267 回答
2

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

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

对于您的后退按钮

function Backbutton() {
    RetrievedData = CommonFunctionalityService.retrieveResults();
}
于 2017-03-24T04:38:20.157 回答
0

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

(function initController() {

    // do your initialize here

})();
于 2019-03-19T12:06:20.623 回答