javascript - $ একটি বস্তু ঘড়ি




angularjs angularjs-scope (6)

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

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

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

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

এখানে fiddle

আমি প্রতিবার নাম বা উপাধি পরিবর্তিত হয় ঘড়ি callback প্রত্যাহার করা আশা করি, কিন্তু এটা ঘটবে না।

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


আপনি $ ঘড়ি পরিবর্তন করতে হবে ....

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>


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

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

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

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

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

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

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

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

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

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

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

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

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


লিটল পারফরম্যান্স টিপ যদি কারো কাছে ডেটাস্টোর ধরনের পরিষেবা থাকে -> মান জোড়াগুলি:

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

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

form বস্তু পরিবর্তন হয় না, শুধুমাত্র name সম্পত্তি

fiddle আপডেট

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

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





angularjs-scope