Làm cách nào để thực thi chức năng điều khiển AngularJS khi tải trang?

Hiện tại tôi có trang Angular.js cho phép tìm kiếm và hiển thị kết quả. Người dùng nhấp vào kết quả tìm kiếm, sau đó nhấp vào nút quay lại. Tôi muốn kết quả tìm kiếm được hiển thị lại nhưng tôi không thể tìm ra cách kích hoạt tìm kiếm để thực hiện. Đây là chi tiết:

• Trang Angular.js của tôi là trang tìm kiếm, với trường tìm kiếm và nút tìm kiếm. Người dùng có thể nhập thủ công một truy vấn và nhấn nút và truy vấn ajax được kích hoạt và kết quả được hiển thị. Tôi cập nhật URL với cụm từ tìm kiếm. Đó là tất cả hoạt động tốt.
• Người dùng nhấp vào kết quả tìm kiếm và được đưa đến một trang khác - cũng hoạt động tốt.
• Người dùng nhấp vào nút quay lại và quay lại trang tìm kiếm góc cạnh của tôi và URL chính xác được hiển thị, bao gồm cả cụm từ tìm kiếm. Tất cả đều hoạt động tốt.
• Tôi đã ràng buộc giá trị trường tìm kiếm với cụm từ tìm kiếm trong URL, vì vậy nó chứa cụm từ tìm kiếm dự kiến. Tất cả đều hoạt động tốt.

Làm cách nào để chức năng tìm kiếm thực hiện lại mà không cần người dùng phải nhấn "nút tìm kiếm"? Nếu đó là jquery thì tôi sẽ thực thi một hàm trong hàm document yet. Tôi không thể thấy tương đương Angular.js.

Một mặt như @ Mark-Rajcok nói rằng bạn có thể thoát khỏi chức năng bên trong riêng tư:

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

Ngoài ra, bạn có thể xem chỉ thị ng-init . Việc thực hiện sẽ giống như:

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

Nhưng hãy chú ý đến nó vì tài liệu góc cạnh ngụ ý (kể từ v1.2) KHÔNG được sử dụng ng-initcho điều đó. Tuy nhiên, imo nó phụ thuộc vào kiến ​​trúc của ứng dụng của bạn.

Tôi đã sử dụng ng-initkhi tôi muốn chuyển một giá trị từ back-end vào ứng dụng góc cạnh:

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

Thử cái này?

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

Tôi không bao giờ có $viewContentLoadedthể làm việc cho tôi và ng-initthực sự chỉ nên được sử dụng trong một ng-repeat(theo tài liệu) và việc gọi một hàm trực tiếp trong bộ điều khiển có thể gây ra lỗi nếu mã dựa trên một phần tử chưa được xác định .

Đây là những gì tôi làm và nó làm việc cho tôi:

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

Trừ khi bạn đang sử dụng ui-router. Sau đó nó là:

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

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

    // your code here

});

Giải pháp của Dimitri / Mark không hiệu quả với tôi nhưng sử dụng hàm $ timeout dường như hoạt động tốt để đảm bảo mã của bạn chỉ chạy sau khi đánh dấu được hiển thị.

# Your controller, including $timeout

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

$timeout($scope.init)

Hy vọng nó giúp.

Bạn có thể làm điều này nếu bạn muốn xem đối tượng DOM viewContentLoaded để thay đổi và sau đó làm một cái gì đó. sử dụng $ scope. $ trên hoạt động quá nhưng khác nhau, đặc biệt là khi bạn có một chế độ trang trên định tuyến của mình.

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

Bạn có thể sử dụng đối tượng cửa sổ $ của angular:

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

Một cách khác:

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

(thông qua https://stackoverflow.com/a/30258904/148412 )

Một lựa chọn khác nếu bạn có một bộ điều khiển chỉ dành riêng cho trang đó:

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

Khi sử dụng $ routeProvider, bạn có thể giải quyết .state và bootstrap dịch vụ của bạn. Điều này có nghĩa là, bạn sẽ tải Trình điều khiển và Chế độ xem, chỉ sau khi giải quyết Dịch vụ của bạn:

tuyến đường

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

Dịch vụ

function ourBootstrapService() {

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

Tìm thấy Dmitry Evseev trả lời khá hữu ích.

Trường hợp 1: Chỉ sử dụng angularJs:
Để thực thi một phương thức khi tải trang, bạn có thể sử dụng ng-inittrong chế độ xem và khai báo phương thức init trong bộ điều khiển, đã nói rằng không nên sử dụng chức năng nặng hơn, theo Tài liệu góc trên ng-init :

Lệnh này có thể bị lạm dụng để thêm số lượng logic không cần thiết vào các mẫu của bạn. Chỉ có một vài cách sử dụng ngInit thích hợp, chẳng hạn như đối với các thuộc tính đặc biệt của ngRepeat, như được thấy trong bản demo dưới đây; và để tiêm dữ liệu thông qua kịch bản phía máy chủ. Bên cạnh một vài trường hợp, bạn nên sử dụng bộ điều khiển thay vì ngInit để khởi tạo giá trị trên một phạm vi.

HTML:

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

Điều khiển:

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

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

    doSearch($routeParams.searchKeyword);
})

Cảnh báo: Không sử dụng bộ điều khiển này cho chế độ xem khác có nghĩa cho một mục đích khác vì nó cũng sẽ khiến phương thức tìm kiếm được thực thi ở đó.

Trường hợp 2: Sử dụng Ionic:
Đoạn mã trên sẽ hoạt động, chỉ cần đảm bảo bộ đệm xem bị vô hiệu hóa route.jsnhư:

route.js

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

Hi vọng điêu nay co ich

Tôi đã có cùng một vấn đề và chỉ có giải pháp này hoạt động với tôi (nó chạy một chức năng sau khi tải xong DOM). Tôi sử dụng điều này để cuộn để neo sau khi trang đã được tải:

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

                        // Your function that runs after all DOM is loaded

                    });

Bạn có thể lưu kết quả tìm kiếm trong một dịch vụ chung có thể sử dụng từ mọi nơi và không rõ ràng khi điều hướng đến trang khác và sau đó bạn có thể đặt kết quả tìm kiếm với dữ liệu đã lưu cho nhấp chuột vào nút quay lại

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

Cho backbutton của bạn

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

gọi các phương thức ban đầu bên trong chức năng tự khởi tạo.

(function initController() {

    // do your initialize here

})();