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


Answers

निर्देश के लिए मेरा संस्करण जो 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));
                }
            });
        }
});
Question

डेटा के अंदर छेड़छाड़ करते समय (उदाहरण के लिए, डेटा डालने या हटाने) के दौरान मैं एक कोणीय निर्देश में $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 ऑब्जेक्ट को असाइन करने के लिए एक नया नया डेटासेट नहीं मिला?






Related