วิธีการใช้งานฟังก์ชั่นควบคุม AngularJS ในการโหลดหน้า

ขณะนี้ฉันมีหน้า Angular.js ที่อนุญาตให้ค้นหาและแสดงผลลัพธ์ ผู้ใช้คลิกที่ผลการค้นหาจากนั้นคลิกปุ่มย้อนกลับ ฉันต้องการให้แสดงผลการค้นหาอีกครั้ง แต่ฉันไม่สามารถหาวิธีที่จะทำให้การค้นหาดำเนินการได้ นี่คือรายละเอียด:

• หน้า Angular.js ของฉันคือหน้าการค้นหาพร้อมช่องค้นหาและปุ่มค้นหา ผู้ใช้สามารถพิมพ์ด้วยตนเองในแบบสอบถามและกดปุ่มและแบบสอบถาม ajax ถูกยิงและผลลัพธ์จะปรากฏขึ้น ฉันอัปเดต URL ด้วยคำค้นหา ทำงานได้ดีทั้งหมด
• ผู้ใช้คลิกที่ผลลัพธ์ของการค้นหาและนำไปยังหน้าอื่น - ซึ่งก็ใช้ได้เช่นกัน
• ผู้ใช้คลิกปุ่มย้อนกลับและกลับไปที่หน้าการค้นหาเชิงมุมของฉันและ URL ที่ถูกต้องจะปรากฏขึ้นรวมถึงคำค้นหา ทำงานได้ดีทั้งหมด
• ฉันผูกค่าฟิลด์การค้นหากับคำค้นหาใน URL ดังนั้นจึงมีคำค้นหาที่คาดหวัง ทำงานได้ดีทั้งหมด

ฉันจะให้ฟังก์ชันค้นหาดำเนินการอีกครั้งได้อย่างไรโดยที่ผู้ใช้ไม่ต้องกดปุ่ม "ค้นหา" ถ้ามันเป็น jquery ฉันจะใช้งานฟังก์ชั่นในฟังก์ชั่น documentready ฉันไม่เห็น Angular.js ที่เทียบเท่ากัน

ในอีกด้านหนึ่งตามที่ @ 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เมื่อฉันต้องการส่งค่าจากส่วนหลังไปยังแอพเชิงมุม:

<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(ตามเอกสารประกอบ) และการเรียกใช้ฟังก์ชันในคอนโทรลเลอร์โดยตรงอาจทำให้เกิดข้อผิดพลาดได้หากรหัสนั้นอาศัยองค์ประกอบที่ยังไม่ได้กำหนด .

นี่คือสิ่งที่ฉันทำและได้ผลกับฉัน:

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

ui-routerยกเว้นกรณีที่คุณกำลังใช้ จากนั้นก็คือ:

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

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

    // your code here

});

โซลูชันของ Dimitri / Mark ไม่ได้ผลสำหรับฉัน แต่การใช้ฟังก์ชัน$ timeoutดูเหมือนว่าจะทำงานได้ดีเพื่อให้แน่ใจว่ารหัสของคุณจะทำงานหลังจากมีการแสดงผลมาร์กอัปเท่านั้น

# Your controller, including $timeout

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

$timeout($scope.init)

หวังว่ามันจะช่วย

คุณสามารถทำได้หากคุณต้องการดูอ็อบเจ็กต์ DOM viewContentLoaded เพื่อเปลี่ยนจากนั้นทำอะไรบางอย่าง ใช้ $ scope $ on ใช้งานได้ แต่ต่างกันโดยเฉพาะเมื่อคุณมีโหมดหน้าเดียวในการกำหนดเส้นทางของคุณ

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

คุณสามารถใช้ $ window object

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

ทางเลือกอื่น:

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

(ผ่านhttps://stackoverflow.com/a/30258904/148412 )

อีกทางเลือกหนึ่งหากคุณมีคอนโทรลเลอร์ที่เฉพาะเจาะจงกับหน้านั้น:

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

เมื่อใช้ $ routeProvider คุณสามารถแก้ไขใน. state และ bootstrap บริการของคุณ นี่คือการพูดว่าคุณกำลังจะโหลดตัวควบคุมและมุมมองหลังจากแก้ไขบริการของคุณ:

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

พบคำตอบ Dmitry Evseev มีประโยชน์มาก

กรณีที่ 1: การใช้ angularJs เพียงอย่างเดียว:
เพื่อเรียกใช้เมธอดกับการโหลดหน้าเว็บคุณสามารถใช้ng-initในมุมมองและประกาศเมธอด init ในคอนโทรลเลอร์โดยกล่าวว่าไม่แนะนำให้ใช้ฟังก์ชั่นที่หนักกว่าตามเอกสาร DGL ใน 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'
  })

หวังว่านี่จะช่วยได้

ฉันมีปัญหาเดียวกันและวิธีแก้ปัญหานี้ใช้งานได้สำหรับฉันเท่านั้น ฉันใช้สิ่งนี้เพื่อเลื่อนเพื่อยึดหลังจากโหลดหน้าแล้ว:

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

})();