পৃষ্ঠা লোডে অ্যাঙ্গুলারজেএস কন্ট্রোলার ফাংশন কীভাবে সম্পাদন করবেন?

Question

বর্তমানে আমার কাছে একটি Angular.js পৃষ্ঠা রয়েছে যা অনুসন্ধান এবং ফলাফল প্রদর্শন করার অনুমতি দেয়। ব্যবহারকারী কোনও অনুসন্ধান ফলাফলের উপর ক্লিক করে, তারপরে ব্যাক বোতামটি ক্লিক করে। আমি চাইছি যে অনুসন্ধানের ফলাফলগুলি আবার প্রদর্শিত হবে তবে কীভাবে অনুসন্ধান চালানো কার্যকর করতে ট্রাই করা যায় তা নিয়ে আমি কাজ করতে পারি না। বিস্তারিত এখানে:

• আমার Angular.js পৃষ্ঠাটি একটি অনুসন্ধান পৃষ্ঠা, একটি অনুসন্ধান ক্ষেত্র এবং একটি অনুসন্ধান বোতাম সহ। ব্যবহারকারী ম্যানুয়ালি একটি ক্যোয়ারিতে টাইপ করতে পারেন এবং একটি বোতাম টিপতে পারেন এবং এজাক্স কোয়েরি বরখাস্ত করা হয় এবং ফলাফলগুলি প্রদর্শিত হয়। আমি অনুসন্ধান শব্দটি সহ ইউআরএল আপডেট করি। যে সব ঠিক আছে।
• ব্যবহারকারী অনুসন্ধানের ফলাফলের উপর ক্লিক করে এবং অন্য পৃষ্ঠায় নিয়ে যায় - এটিও দুর্দান্ত কাজ করে।
• ব্যবহারকারীরা পিছনে বোতামটি ক্লিক করে এবং আমার কৌণিক অনুসন্ধান পৃষ্ঠায় ফিরে যায় এবং অনুসন্ধান শব্দটি সহ সঠিক ইউআরএল প্রদর্শিত হয়। সব ঠিক আছে।
• আমি অনুসন্ধানের ক্ষেত্রের মানটি ইউআরএলে অনুসন্ধান শব্দটির সাথে আবদ্ধ করেছি, সুতরাং এটিতে প্রত্যাশিত অনুসন্ধান শব্দটি রয়েছে। সব ঠিক আছে।

ব্যবহারকারীর "অনুসন্ধান বোতাম" টিপুন না করে আমি কীভাবে আবার সম্পাদন করতে পারি? যদি এটি jquery হয় তবে আমি ডকুমেন্টডিয়ার ফাংশনে একটি ফাংশন সম্পাদন করব। আমি Angular.js এর সমতুল্য দেখতে পাচ্ছি না।

Comments

আপনি ব্যবহার করছেন $routepProvider? আপনার অ্যাপ্লিকেশনটিতে সেবার সাথে সংযোগ করতে এটি ব্যবহার করুন যা অনুসন্ধান ফলাফলের জন্য ডেটা সরবরাহ করে। document.readyJQuery হিসাবে পদ হিসাবে ভাবেন না । আপনি বর্তমানে অনুসন্ধান কীভাবে সজ্জিত করেছেন তা না মেরে অনেক সাহায্য করা কঠিন

— Charlietfl

Answer 1

একদিকে যেমন @ মার্ক-রাজকোক বলেছিলেন আপনি ব্যক্তিগত অভ্যন্তরীণ ফাংশনটি নিয়ে সরে যেতে পারবেন:

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

এছাড়াও আপনি এনজি-ডিসি নির্দেশিকাটি একবার দেখে নিতে পারেন । বাস্তবায়ন অনেকটা এর মতো হবে:

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

তবে কৌনিক ডকুমেন্টেশন এরng-init জন্য ব্যবহার না করার জন্য (v1.2 সাল থেকে) এটি সম্পর্কে যত্নবান হন । তবে ইমো এটি আপনার অ্যাপ্লিকেশনের আর্কিটেকচারের উপর নির্ভর করে।

আমি ng-initযখন ব্যাক-এন্ড থেকে কৌনিক অ্যাপে কোনও মান পাস করতে চাইতাম তখন আমি ব্যবহার করেছি:

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

Comments

@ ডুক, আপনি কি কেবল নিজের কন্ট্রোলারের নীচে init () ফাংশনটির বিষয়বস্তু রাখতে পারবেন না? অর্থাৎ, আপনার এনজি-আরআর ব্যবহার এবং একটি দীক্ষা () ফাংশন কেন দরকার? যখন ব্যবহারকারী পিছনের বোতামটি হিট করে, আমি ধরে নিই যে আপনি দর্শনগুলি স্যুইচ করছেন, সুতরাং একটি নতুন myCtrlনিয়ামক তৈরি করা হয় এবং কার্যকর করা হয়।

— রাজকোক

এই সমাধানটি কাজ করার সময়, আমি হ্রাস পেয়েছি কারণ এনজি-এন ডকুমেন্টেশন এর বিরুদ্ধে পরামর্শ দেয়। বিশেষত, "নীচের ডেমোতে দেখা গেছে, এনজিআরপিট এর বিশেষ বৈশিষ্ট্যগুলি হ্রাস করার জন্য কেবলমাত্র এনজিআইনিটের উপযুক্ত ব্যবহার this এই ক্ষেত্রেটি ছাড়াও, আপনার সুযোগের স্কোপে মানগুলি আরম্ভ করার জন্য এনজিআইনিটের পরিবর্তে আপনার নিয়ামক ব্যবহার করা উচিত" "

— জেসন ক্যাপ্রিওটি

এইচটিএমএল এর জায়গায় থাকার পরে কন্ট্রোলার তাত্ক্ষণিক হয়।

— দিমিত্রি ইভসিভ

যদি নিয়ামকটিকে অন্য পৃষ্ঠাগুলিতে পুনরায় ব্যবহার করা হয় তবে আপনি কেবল একটি নির্দিষ্ট পৃষ্ঠায় এটি চালিত করতে চান?

— রবার্তো লিনিয়ার্স

@ রুবার্তো লিনারেস আমি ব্যক্তিগতভাবে পুনরায় ব্যবহারযোগ্য কার্যকারিতার জন্য আরও ভাল জায়গা হওয়ার দিকনির্দেশনা খুঁজে পাই। আপনি একটি Init প্যারামিটার সহ একটি নির্দেশ হতে পারে <div smth on-init="doWhatever()">। অবশ্যই এটি একটি নির্দিষ্ট ব্যবহারের ক্ষেত্রে নির্ভর করে।

— দিমিত্রি এভেসেভ

Answer 2

এটা চেষ্টা কর?

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

Comments

উত্তরের জন্য ধন্যবাদ তবে দিমিত্রির উত্তরটি আমি যা খুঁজছি তার সাথে একটি সঠিক মিল ছিল। আরও গবেষণায় $ ভিউ কনটেন্টলয়েড

— ডিউক

ব্যবহারের ক্ষেত্রে পৃথক পৃথক। আমি মার্কের পদ্ধতিটিও সর্বদা ব্যবহার করি।

— হলোগ্রাফিক-নীতিগত

আমার ব্যবহারের ক্ষেত্রে এটি একটি নিখুঁত সমাধান ছিল। ব্যবহারকারীকে এটি অনুলিপি করতে উত্সাহিত করার জন্য আমাদের পাঠ্যটি স্বনির্বাচিত করা দরকার। পৃষ্ঠাটি অনেকবার পুনরায় লোড / পুনর্বিবেচনা করা যেতে পারে, সুতরাং C ভিউকন্টেন্টলয়েডটি হুবহু মিল ছিল। ধন্যবাদ!

— ওলগা জনাটেনকো

এটি কি বেশ কয়েকবার কার্যকর করা সম্ভব? আমি এমন একটি আচরণ পাচ্ছি যা দেখে মনে হচ্ছে এটি অনুকরণ করা হচ্ছে ...

— ম্যাডফিসিসিস্ট

এইটি আমার পক্ষে কাজ করে নি $ সুযোগ। ঘড়ি কাজ করেছে। মূল পার্থক্য কী?

— বুরাক টোকাক

Answer 3

আমি কখনই $viewContentLoadedআমার পক্ষে কাজ করতে পারি না , এবং ng-initসত্যই কেবল একটি ng-repeat(ডকুমেন্টেশন অনুযায়ী) হিসাবে ব্যবহার করা উচিত এবং কোডটি কোনও সংজ্ঞায়িত হয়নি এমন কোনও উপাদানটির উপর নির্ভর করে যদি সরাসরি কোনও নিয়ামকের মাধ্যমে সরাসরি কোনও ফাংশন কল করা ত্রুটি সৃষ্টি করতে পারে can ।

এটি আমিই করি এবং এটি আমার পক্ষে কাজ করে:

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

যতক্ষণ না আপনি ব্যবহার করছেন ui-router। তারপর, এটা এর:

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

Comments

আপনি দুর্দান্ত, আমার বন্ধু।

— টাকো

ঠিক আমার যা প্রয়োজন ছিল। আমি আক্ষরিকভাবে এই দুই দিনের জন্য খুঁজছিলাম!

— হ্যালোজেবাস

$scope.$on('$routeChangeSuccess'url এ প্রতিবারের প্যারামিটারগুলিতে আগুন লেগে যায় ( $locationউদাহরণস্বরূপ), এবং সুতরাং আপনি ঠিক ব্যবহার করতে পারেন $scope.$on('$locationChangeSuccess'। আপনার যদি পৃষ্ঠা লোড / পুনরায় লোড এ কিছু ট্রিগার দরকার হয় তবে আপনি $scope.$watch('$viewContentLoaded'এখানে পরামর্শ মতো ব্যবহার করতে পারেন । এটি ইউআরএল প্যারামিটার পরিবর্তনের সময় চালিত হবে না।

— নিউরোট্রান্সমিটার

অ্যাঙ্গুলার জেএস ১.১17.২ ব্যবহার করে অভ্যন্তরীণ নিয়ামক $ রুট চেঞ্জসাকসিস আশ্চর্যজনকভাবে কাজ করেছেন ... দীর্ঘ লাইভ অ্যাডাম0101 ...

— আরিফমস্তফা

Answer 4

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

    // your code here

});

Comments

অবশ্যই গ্রহণযোগ্য উত্তর হতে হবে, এটি করা এটিই সবচেয়ে নিরাপদ

— মারওয়েন ট্রাবেলসি

এটি ভাল যদি আমরা সাথে কাজ না করে $scopeপরিবর্তে কাজ করি this।

— আকাশ

এই কোথায় যেতে হবে? আমার টেম্পলেটে এটি আছে এবং এটি গুলি চালাচ্ছে না।

— ডেভ

এই ক্ষেত্রে ডকুমেন্ট ইনজেকশন করা ভাল হবে না? angular.element ($ ডকুমেন্ট) .ready ...

— Jamie

ব্যাখ্যার প্রশংসা হবে

— হিদায়ত রহমান

Answer 5

দিমিত্রি / মার্কের সমাধানটি আমার পক্ষে কার্যকর হয়নি তবে code টাইমআউট ফাংশনটি ব্যবহার করে মনে হয় আপনার কোডটি কেবল মার্কআপ রেন্ডার হওয়ার পরে চলে ensure

# Your controller, including $timeout

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

$timeout($scope.init)

আশা করি এটা সাহায্য করবে.

Comments

অবশেষে। এটিই আমার পক্ষে কাজ করেছে। ধন্যবাদ।

— zmirc

এইটা কাজ করে. এছাড়াও আপনার টাইমআউট = $ টাইমআউট ($ স্কোপ.ইনাইট, মিলিসেকেন্ড) রয়েছে এমন $ টাইমআউট.ক্যান্সেল (টাইমার) দিয়ে টাইমআউট সাফ করতে ভুলবেন না; একবার আপনার সূচনা সম্পন্ন হয়ে যায়। এছাড়াও, আমি মনে করি না above

— এমমানুয়েল এনকে

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। এটি কেবলমাত্র আমার পক্ষে কাজ করেছিল (উপরের সমস্ত উত্তর চেষ্টা করে)। এমনকি যদি আপনি কোনও iframe লোড হওয়ার জন্য অপেক্ষা করেন তবে এটি কাজ করে।

— হ্যালো_ফর

এইটা কাজ করে ! ভিউ কনটেন্টলয়েড আমার পক্ষে কাজ করেনি

— অন্ধকার নাইট

Answer 6

আপনি যদি ভিউ কনটেন্টলয়েডড ডম অবজেক্টটি পরিবর্তন করতে চান এবং তারপরে কিছু করতে চান তবে আপনি এটি করতে পারেন। $ সুযোগ। using ব্যবহার করে খুব বেশি তবে ভিন্নভাবে কাজ করে বিশেষত যখন আপনার রাউটিংয়ে একটি পৃষ্ঠা মোড থাকে।

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

Comments

বিশেষত, যদি আপনি $ রুটস্কোপ ব্যবহার করেন $ $ রুটস্কোপ instead এর পরিবর্তে দেখুন route এটিতে রুট পরিবর্তনে আগুন লাগবে না, তাই আপনি প্রাথমিক পৃষ্ঠা লোডের জন্য নির্দিষ্ট যুক্তি ব্যবহার করতে পারেন।

— csahlman

Answer 7

আপনি কৌণিক $ উইন্ডো অবজেক্টটি ব্যবহার করতে পারেন:

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

Answer 8

অন্য বিকল্প:

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

( https://stackoverflow.com/a/30258904/148412 এর মাধ্যমে )

Answer 9

অন্য একটি বিকল্প যদি আপনার কাছে সেই পৃষ্ঠাটির সাথে সুনির্দিষ্ট নির্দিষ্ট নিয়ামক থাকে:

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

Answer 10

$ রুটপ্রোভাইডার ব্যবহার করার সময় আপনি। স্টেটটি সমাধান করতে পারেন এবং আপনার পরিষেবা বুটস্ট্র্যাপ করতে পারেন। এটি বলতে হবে, আপনি কেবলমাত্র আপনার পরিষেবার সমাধানের পরে কন্ট্রোলার এবং দেখুন লোড করতে চলেছেন:

নামঃ 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
 }
}

Answer 11

দিমিত্রি ইভসিভ উত্তরটি বেশ কার্যকর।

কেস 1: একা কৌণিক জে ব্যবহার:
পৃষ্ঠার লোডে কোনও পদ্ধতি কার্যকর করতে, আপনি এনজি-থ্রিতে কৌণিক ডক্সng-init অনুসারে ভারী ফাংশনটি ব্যবহার করার পরামর্শ দেওয়া হয় না বলে আপনি দৃশ্যে ব্যবহার করতে পারেন এবং নিয়ামকটিতে সূচনা পদ্ধতিটি ঘোষণা করতে পারেন :

আপনার টেম্পলেটগুলিতে অপ্রয়োজনীয় পরিমাণ যুক্তি যুক্ত করতে এই নির্দেশকে অপব্যবহার করা যেতে পারে। নীচে ডেমোতে দেখা যায়, এনজিআইনিটের কয়েকটি বিশেষ ব্যবহার যেমন এনজিআরপিট এর বিশেষ বৈশিষ্ট্যগুলি হ্রাস করার জন্য; এবং সার্ভার সাইড স্ক্রিপ্টিংয়ের মাধ্যমে ডেটা ইনজেকশনের জন্য। এই কয়েকটি কেস ছাড়াও, আপনার স্কোপগুলিতে মানগুলি আরম্ভ করার জন্য এনজিআইএন্টের পরিবর্তে আপনার নিয়ামক ব্যবহার করা উচিত।

এইচটিএমএল:

<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: আয়নিক ব্যবহার:
উপরের কোডটি কাজ করবে, কেবল নিশ্চিত করুন যে ভিউ ক্যাশে এতে অক্ষম রয়েছে route.js:

route.js

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

আশাকরি এটা সাহায্য করবে

Comments

এটি কেবল একটি উপরে ছিল এবং একেবারে নীচে ছিল, খুশী আমি সমস্ত পথে নেমে এসেছি, খুশী আমার cache: falseজন্য এটি করেছেন - ধন্যবাদ!

— রানী ক্ষীর

Answer 12

আমার একই সমস্যা ছিল এবং কেবলমাত্র এই সমাধানটি আমার জন্য কাজ করেছিল (এটি একটি সম্পূর্ণ ডিওএম লোড হওয়ার পরে এটি একটি ফাংশন চালায়)। পৃষ্ঠাটি লোড হওয়ার পরে আমি এঙ্কারে স্ক্রোলের জন্য এটি ব্যবহার করি:

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

                        // Your function that runs after all DOM is loaded

                    });

Answer 13

আপনি অনুসন্ধানের ফলাফলগুলিকে একটি সাধারণ পরিষেবাতে সংরক্ষণ করতে পারেন যা যে কোনও জায়গা থেকে ব্যবহার করতে পারে এবং অন্য পৃষ্ঠায় নেভিগেট করার সময় পরিষ্কার হয় না এবং তারপরে আপনি ব্যাক বোতামের ক্লিকের জন্য সংরক্ষিত ডেটা দিয়ে অনুসন্ধানের ফলাফলগুলি সেট করতে পারেন

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

আপনার ব্যাকবুটনের জন্য

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

Answer 14

স্ব আরম্ভের ফাংশনের ভিতরে প্রাথমিক পদ্ধতিগুলি কল করুন।

(function initController() {

    // do your initialize here

})();