an একটি বিষয় দেখুন

Question

আমি একটি অভিধানে পরিবর্তনগুলি দেখতে চাই, তবে কোনও কারণে ঘড়ির কলব্যাক কল করা হয় না।

এখানে আমি ব্যবহার করি এমন একটি নিয়ামক:

function MyController($scope) {
    $scope.form = {
        name: 'my name',
        surname: 'surname'
    }

    $scope.$watch('form', function(newVal, oldVal){
        console.log('changed');
    });
}

এখানে বেহালার ।

আমি প্রত্যাশা করি $ ঘড়ির কলব্যাক প্রতিবার নাম বা উপাধি পরিবর্তন করা হবে, তবে তা হয় না।

এটি করার সঠিক উপায় কী?

Comments

সম্ভাব্য সদৃশ কিভাবে গভীর angularjs মধ্যে একটি অ্যারের ঘড়ি?

— lort

Answer 1

কল করুন $watchসঙ্গে trueতৃতীয় আর্গুমেন্ট হিসাবে:

$scope.$watch('form', function(newVal, oldVal){
    console.log('changed');
}, true);

ডিফল্টরূপে জাভাস্ক্রিপ্টে দুটি জটিল বস্তুর তুলনা করার সময়, তাদের "রেফারেন্স" সাম্যতার জন্য পরীক্ষা করা হবে, যা জিজ্ঞাসা করবে যে দুটি বস্তু "মান" সমতা না করে একই জিনিসকে নির্দেশ করে কিনা, যা কিনা সমস্ত বৈশিষ্ট্যের মানগুলি পরীক্ষা করে বস্তু সমান।

প্রতি কৌণিক ডকুমেন্টেশন , তৃতীয় প্যারামিটারটি জন্য objectEquality:

কখন objectEquality == true, ওয়াচএক্সপ্রেসের বৈষম্য angular.equalsফাংশন অনুযায়ী নির্ধারিত হয়। পরবর্তী তুলনার জন্য অবজেক্টের মান সংরক্ষণ করতে, angular.copyফাংশনটি ব্যবহৃত হয়। এর অর্থ হ'ল জটিল বস্তুগুলি দেখার ক্ষেত্রে বিরূপ স্মৃতি এবং কর্মক্ষমতা জড়িত।

Comments

এটি একটি ভাল উত্তর, তবে আমি কল্পনা করেছি এমন সময় আছে যখন আপনি পুনরাবৃত্তভাবে কোনও বস্তু দেখতে চান না

— জেসন

সেখানে. ডিফল্টরূপে যদি আপনি পাস না করেন true, তবে পর্যবেক্ষণের মানটি যদি কোনও বস্তু বা অ্যারে হয় তবে এটি রেফারেন্স সমতার জন্য তা পরীক্ষা করবে। সেক্ষেত্রে আপনার বৈশিষ্ট্যগুলি স্পষ্টভাবে নির্দিষ্ট করা উচিত, যেমন $scope.$watch('form.name')এবং$scope.$watch('form.surname')

— রসপিডিয়া

ধন্যবাদ। ঠিক এটাই আমি মিস করেছি। জেসন, আপনি ঠিক বলেছেন - আপনি সবসময় পুনরাবৃত্ত বস্তুগুলি দেখতে চান না, তবে আমার ক্ষেত্রে এটি আমার প্রয়োজন মতো ছিল।

— ভ্লাদিমির সিডোরেনকো

অপ্রয়োজনীয় জেএস এবং রেফারেন্স তুলনা পারফরম্যান্স বাড়াতে সহায়তা করতে পারে।

— ড্রাগগোস রুসু

Answer 2

formঅবজেক্ট পরিবর্তন করা হয় না, শুধুমাত্র nameসম্পত্তি

আপডেট বেহালার

function MyController($scope) {
$scope.form = {
    name: 'my name',
}

$scope.changeCount = 0;
$scope.$watch('form.name', function(newVal, oldVal){
    console.log('changed');
    $scope.changeCount++;
});
}

Answer 3

যদি কারও কাছে কী -> মান জোড়া সহ একটি ডেটাস্টোর ধরণের পরিষেবা থাকে তবে সামান্য পারফরম্যান্সের টিপস :

আপনার যদি ডেটা স্টোর নামে একটি পরিষেবা থাকে তবে আপনি যখনই আপনার বড় ডেটা অবজেক্ট পরিবর্তন করেন আপনি একটি টাইমস্ট্যাম্প আপডেট করতে পারেন । পুরো অবজেক্টকে গভীরভাবে দেখার পরিবর্তে আপনি কেবল পরিবর্তনের জন্য একটি টাইমস্ট্যাম্প দেখছেন।

app.factory('dataStore', function () {

    var store = { data: [], change: [] };

    // when storing the data, updating the timestamp
    store.setData = function(key, data){
        store.data[key] = data;
        store.setChange(key);
    }

    // get the change to watch
    store.getChange = function(key){
        return store.change[key];
    }

    // set the change
    store.setChange = function(key){
        store.change[key] = new Date().getTime();
    }

});

এবং একটি নির্দেশিকায় আপনি কেবল পরিবর্তনের টাইমস্ট্যাম্প দেখছেন

app.directive("myDir", function ($scope, dataStore) {
    $scope.dataStore = dataStore;
    $scope.$watch('dataStore.getChange("myKey")', function(newVal, oldVal){
        if(newVal !== oldVal && newVal){
            // Data changed
        }
    });
});

Comments

আমি মনে করি এটি উল্লেখ করা উচিত যে এক্ষেত্রে আপনি যে স্টোরটি সংরক্ষণ করছেন তার পুরানো মানটিতে অ্যাক্সেস থাকার কার্যকারিতাটি looseিলা করবেন। newVal, oldValএই উদাহরণে টাইমস্ট্যাম্প মানগুলি পর্যবেক্ষিত বস্তুর মান নয়। এটি এই উত্তরটিকে অবৈধ করে না, আমি কেবল মনে করি এটি একটি অপূর্ণতা যা উল্লেখযোগ্য।

— মিচা শেলিয়াম্যান

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

— ফেরেনাক টাকাকস

Answer 4

আপনার কোডটি কাজ না করার কারণটি $watchডিফল্টরূপে রেফারেন্স চেক করে। সুতরাং সংক্ষেপে এটি নিশ্চিত করুন যে এটি যে বস্তুটির কাছে প্রেরণ করা হবে তা নতুন অবজেক্ট। তবে আপনার ক্ষেত্রে আপনি ফর্ম অবজেক্টের নতুন কিছু তৈরি না করে কিছু সম্পত্তি পরিবর্তন করছেন creating এটিকে কাজ করার জন্য আপনি trueতৃতীয় প্যারামিটার হিসাবে পাস করতে পারেন ।

$scope.$watch('form', function(newVal, oldVal){
    console.log('invoked');
}, true);

এটি কাজ করবে তবে আপনি $ ওয়াচ কালেকশনটি ব্যবহার করতে পারেন যা আরও কার্যকর $watchCollectionহবে $ ঘড়ি কারণ ফর্ম অবজেক্টে অগভীর বৈশিষ্ট্যের জন্য নজর রাখবে। যেমন

$scope.$watchCollection('form', function (newVal, oldVal) {
    console.log(newVal, oldVal);
});

Answer 5

আপনি যেহেতু ফর্ম অবজেক্টের পরিবর্তনগুলি সন্ধান করছেন, সেহেতু সর্বাধিক দেখার পদ্ধতিটি ব্যবহার করা
$watchCollection। বিভিন্ন পারফরম্যান্স বৈশিষ্ট্যের জন্য দয়া করে অফিসিয়াল ডকুমেন্টেশন একবার দেখুন ।

Answer 6

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

function MyController($scope) {
    $scope.form = {
        name: 'my name',
        surname: 'surname'
    }

    function track(newValue, oldValue, scope) {
        console.log('changed');
    };

    $scope.$watch('form.name', track);
}

Answer 7

যে কেউ অবজেক্টের অ্যারেতে কোনও বস্তুর পরিবর্তনের জন্য দেখতে চায়, তাদের পক্ষে এটি আমার পক্ষে কাজ করে বলে মনে হয়েছিল (এই পৃষ্ঠার অন্যান্য সমাধানগুলি যেমন করেন নি):

function MyController($scope) {

    $scope.array = [
        data1: {
            name: 'name',
            surname: 'surname'
        },
        data2: {
            name: 'name',
            surname: 'surname'
        },
    ]


    $scope.$watch(function() {
        return $scope.data,
    function(newVal, oldVal){
        console.log(newVal, oldVal);
    }, true);

Answer 8

আপনার অবশ্যই $ ঘড়িতে পরিবর্তন করা উচিত ....

function MyController($scope) {
    $scope.form = {
        name: 'my name',
    }

    $scope.$watch('form.name', function(newVal, oldVal){
        console.log('changed');
     
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app>
    <div ng-controller="MyController">
        <label>Name:</label> <input type="text" ng-model="form.name"/>
            
        <pre>
            {{ form }}
        </pre>
    </div>
</div>

Comments

দু'বছরের পুরানো প্রশ্নের উত্তর দিয়ে একটি বিদ্যমান প্রশ্নের প্রায় সঠিক নকল? ভালো না.

— জারেড স্মিথ 13