javascript - एक कोणीय निर्देश में डेटा परिवर्तन के लिए $ देख रहे हैं





angularjs angularjs-directive (4)


क्योंकि यदि आप अपने डेटा को गहराई से ट्रिगर करना चाहते हैं, तो आपको अपने श्रोता के true में 3 वें तर्क को true । डिफ़ॉल्ट रूप से यह false और यह आपके द्वारा कार्य किए जाने वाले साधनों को ट्रिगर करेगा, केवल तभी जब आपका चर बदल जाएगा

डेटा के अंदर छेड़छाड़ करते समय (उदाहरण के लिए, डेटा डालने या हटाने) के दौरान मैं एक कोणीय निर्देश में $watch चर को कैसे ट्रिगर कर सकता हूं, लेकिन उस चर के लिए एक नई वस्तु असाइन नहीं कर सकता?

मेरे पास वर्तमान में एक JSON फ़ाइल से लोड किया जा रहा एक सरल डेटासेट है। मेरा कोणीय नियंत्रक यह करता है, साथ ही कुछ कार्यों को परिभाषित करता है:

App.controller('AppCtrl', function AppCtrl($scope, JsonService) {
    // load the initial data model
    if (!$scope.data) {
        JsonService.getData(function(data) {
            $scope.data = data;
            $scope.records = data.children.length;
        });
    } else {
        console.log("I have data already... " + $scope.data);
    }

    // adds a resource to the 'data' object
    $scope.add = function() {
        $scope.data.children.push({ "name": "!Insert This!" });
    };

    // removes the resource from the 'data' object
    $scope.remove = function(resource) {
        console.log("I'm going to remove this!");
        console.log(resource);
    };

    $scope.highlight = function() {

    };
});

मेरे पास एक <button> है जिसे $scope.add फ़ंक्शन कहा जाता है, और नई ऑब्जेक्ट $scope.data सेट में ठीक से डाली जाती है। मैंने जो टेबल सेट अप किया है, वह हर बार अपडेट होता है जब मैं "एड" बटन दबाता हूं।

<table class="table table-striped table-condensed">
  <tbody>
    <tr ng-repeat="child in data.children | filter:search | orderBy:'name'">
      <td><input type="checkbox"></td>
      <td>{{child.name}}</td>
      <td><button class="btn btn-small" ng-click="remove(child)" ng-mouseover="highlight()"><i class="icon-remove-sign"></i> remove</button></td>
    </tr>
  </tbody>
</table>

हालांकि, यह सब कुछ होता है जब $scope.data देखने के लिए सेट एक निर्देश को निकाल दिया नहीं जा रहा है।

मैं एचटीएमएल में अपना टैग परिभाषित करता हूं:

<d3-visualization val="data"></d3-visualization>

जो निम्नलिखित निर्देश से जुड़ा हुआ है (प्रश्न संवेदना के लिए छंटनी):

App.directive('d3Visualization', function() {
    return {
        restrict: 'E',
        scope: {
            val: '='
        },
        link: function(scope, element, attrs) {
            scope.$watch('val', function(newValue, oldValue) {
                if (newValue)
                    console.log("I see a data change!");
            });
        }
    }
});

मुझे "I see a data change!" बहुत शुरुआत में संदेश, लेकिन जब मैंने "एड" बटन दबाया तो कभी नहीं।

मैं data ऑब्जेक्ट से ऑब्जेक्ट्स को जोड़ने / निकालने पर $watch घटना को कैसे ट्रिगर कर सकता हूं, data ऑब्जेक्ट को असाइन करने के लिए एक नया नया डेटासेट नहीं मिला?




निर्देश के लिए मेरा संस्करण जो jqplot का उपयोग डेटा उपलब्ध होने के बाद प्लॉट करने के लिए करता है:

    app.directive('lineChart', function() {
        $.jqplot.config.enablePlugins = true;

        return function(scope, element, attrs) {
            scope.$watch(attrs.lineChart, function(newValue, oldValue) {
                if (newValue) {
                    // alert(scope.$eval(attrs.lineChart));
                    var plot = $.jqplot(element[0].id, scope.$eval(attrs.lineChart), scope.$eval(attrs.options));
                }
            });
        }
});



आपको गहरी वस्तु गंदे जांच को सक्षम करने की आवश्यकता है। डिफ़ॉल्ट कोणीय द्वारा केवल आपके द्वारा देखे जाने वाले शीर्ष स्तर चर के संदर्भ की जांच करता है।

App.directive('d3Visualization', function() {
    return {
        restrict: 'E',
        scope: {
            val: '='
        },
        link: function(scope, element, attrs) {
            scope.$watch('val', function(newValue, oldValue) {
                if (newValue)
                    console.log("I see a data change!");
            }, true);
        }
    }
});

Scope देखें। $ घड़ी फ़ंक्शन का तीसरा पैरामीटर गहरी गंदे जांच को सक्षम बनाता है यदि यह सत्य पर सेट हो।

ध्यान दें कि गहरी गंदी जांच महंगा है । इसलिए यदि आपको केवल संपूर्ण data चर के बजाय बच्चों की सरणी देखने की आवश्यकता है तो वेरिएबल को सीधे देखें।

scope.$watch('val.children', function(newValue, oldValue) {}, true);

संस्करण 1.2.x ने $watchCollection पेश किया

जब भी कोई गुण बदलता है (सरणी के लिए, यह सरणी वस्तुओं को देखने का तात्पर्य है, ऑब्जेक्ट मैप्स के लिए, यह गुणों को देखने का तात्पर्य है) किसी वस्तु के गुणों को देखता है और आग लगती है

scope.$watchCollection('val.children', function(newValue, oldValue) {});



वर्तमान में तीन अलग-अलग ईवेंट हैं जो क्लाइंट डिवाइस चलाते समय ट्रिगर हो सकते हैं या नहीं भी हो सकते हैं। उनमें से दो अभिविन्यास और आखिरी गति के आसपास केंद्रित हैं:

  • ondeviceorientation कि ondeviceorientation क्रोम के डेस्कटॉप संस्करण पर काम करने के लिए जाना जाता है, और अधिकांश ऐप्पल लैपटॉप में काम करने के लिए आवश्यक हार्डवेयर लगता है। यह आईओएस 4.2 के साथ आईफोन 4 पर मोबाइल सफारी पर भी काम करता है। ईवेंट हैंडलर फ़ंक्शन में, आप फ़ंक्शन के लिए केवल तर्क के रूप में प्रदान किए गए ईवेंट डेटा पर alpha , beta , gamma मानों तक पहुंच सकते हैं।

  • फ़ायरफ़ॉक्स 3.6 और नए पर onmozorientation समर्थित है। फिर, यह ज्यादातर ऐप्पल लैपटॉप पर काम करने के लिए जाना जाता है, लेकिन एक्सेलेरोमीटर के साथ विंडोज या लिनक्स मशीनों पर भी काम कर सकता है। ईवेंट हैंडलर फ़ंक्शन में, पहले तर्क के रूप में प्रदान किए गए ईवेंट डेटा पर x , y , z फ़ील्ड देखें।

  • ondevicemotion आईफोन 3 जीएस + 4 और आईपैड (आईओएस 4.2 के साथ दोनों) पर काम करने के लिए जाना जाता है, और क्लाइंट डिवाइस के वर्तमान त्वरण से संबंधित डेटा प्रदान करता है। हैंडलर फ़ंक्शन में पास किए गए ईवेंट डेटा में acceleration और accelerationIncludingGravity , जिसमें प्रत्येक अक्ष के लिए तीन फ़ील्ड होते हैं: x , y , z

नमूना वेबसाइट "भूकंप का पता लगाने" की एक श्रृंखला का उपयोग करता है, यह जानने के लिए कि किस घटना को संलग्न किया गया है (कुछ हद तक प्राथमिकता वाले क्रम में) और एक सामान्य tilt समारोह में प्राप्त डेटा को पास करता है:

if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function () {
        tilt([event.beta, event.gamma]);
    }, true);
} else if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', function () {
        tilt([event.acceleration.x * 2, event.acceleration.y * 2]);
    }, true);
} else {
    window.addEventListener("MozOrientation", function () {
        tilt([orientation.x * 50, orientation.y * 50]);
    }, true);
}

निरंतर कारक 2 और 50 का उपयोग दो बाद की घटनाओं से पहले के उन लोगों के साथ रीडिंग को "संरेखित" करने के लिए किया जाता है, लेकिन इनका कोई सटीक प्रतिनिधित्व नहीं होता है । इस सरल "खिलौना" परियोजना के लिए यह ठीक काम करता है, लेकिन यदि आपको कुछ और गंभीर के लिए डेटा का उपयोग करने की आवश्यकता है, तो आपको विभिन्न घटनाओं में प्रदान किए गए मूल्यों की इकाइयों से परिचित होना होगा और सम्मान के साथ उनका इलाज करना होगा :)





javascript angularjs angularjs-directive