javascript - किसी ईवेंट के प्रतिसाद में डेटा लोड होने पर कोणीय तालिका को पुनः लोड करना तब काम नहीं करता है




angularjs multithreading html-table (3)

सभी को धन्यवाद। सभी तरह के सुझावों को इकट्ठा करने का यह काम समाधान है:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
</head>

<body>
<html>
        <div ng-controller="MyCtrl" ng-app="myapp">
        <table ng-table="commentsTable">
            <tr ng-repeat="item in obj track by $index">
                <td class="plantCell">{{item.nome}}: </td>
            <td class="statusCell">{{item.status}}</td>
            <td class="statusCell">{{item.testo}}</td>
        </tr>
        </table>
        </div>
        <script language="javascript">
            var app=angular.module('myapp', []);
            var printOperation;
            function GetFromLocalStorage(key) {
                var items=localStorage.getItem(key);
                console.log(items);
                if (items===null){
                    console.log("item null");
                    return null;
                } else {
                    items = JSON.parse(items);
                    return items;
                }
            }
            var app = angular.module('myapp', []);

            app.controller('MyCtrl',
                    function ($scope) {
                    $scope.printComments = function () {
                            $scope.obj=GetFromLocalStorage("AllComments");
                    console.log("ricevo evento e ricarico tabella");
                    console.log($scope.obj);
                    };
                    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
                    var eventer = window[eventMethod];
                    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
                    eventer(messageEvent, function (e) {
                            console.log("ricevo messaggio");
                            $scope.$applyAsync($scope.printComments);
                    }, false);  
                }
        );      
        </script>

मुझे एक कोणीय तालिका को पॉप्यूल करने की आवश्यकता है, जब किसी वेबबुक से नया डेटा प्राप्त हो जाता है, जिससे माता-पिता। प्रेषित संदेश ("प्रिंट कॉममेंट्स", "*") कॉल करता है:

var app = angular.module('myapp', []);
var printOperation;

function GetFromLocalStorage(key) {
    var items = localStorage.getItem(key);
    console.log(items);
    if (items === null) {
        console.log("item null");
        return null;
    } else {
        if (typeof items != "string") {
            items = JSON.stringify(items);
        }
        return items;
    }
}

app.controller('MyCtrl',
    function ($scope) {
        $scope.printComments = function () {
            //$scope.obj=GetFromLocalStorage("AllComments");
            $scope.obj = [{
                "nome": "first",
                "status": 1,
                "testo": "Rottura rullo 1!!!"
            }, {
                "nome": "second",
                "status": 0,
                "testo": "Rottura rullo fsdfsf!!!"
            }];
            console.log("ricevo evento e ricarico tabella");
            console.log($scope.obj);
        };

        console.log("assegno print operation");
        printOperation = $scope.printComments;
        printOperation();
    }
);
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent, function (e) {
    console.log("ricevo messaggio");
    printOperation();
}, false);		
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-controller="MyCtrl" ng-app="myapp">
<table ng-table="commentsTable">
  <tr ng-repeat="item in obj track by $index">
    <td class="plantCell">{{item.nome}}: </td>
    <td class="statusCell">{{item.status}}</td>
    <td class="statusCell">{{item.testo}}</td>
  </tr>
</table>
</div>

अगर मैं स्कोप फ़ंक्शन के अंदर प्रिंटऑपरेशन को कॉल करता हूं, तो टेबल सही तरीके से अपडेट हो जाती है, अगर रिवर्स पर जब मैं ईवेंट प्राप्त करता हूं , तो तालिका अपडेट नहीं होती है। अगर यह एक स्विफ्ट या जावा प्रोग्राम था, तो मुझे लगता है कि मैं एक पृष्ठभूमि धागा पर हूं, क्या जावास्क्रिप्ट में ऐसी कोई अवधारणा है और मैं मुख्य धागे में कैसे आ सकता हूं?


आप AngulraJS स्कोप के बाहर डेटा अपडेट करने की कोशिश कर रहे हैं (ईवेंट श्रोता में) और यही वजह है कि दृश्य अपडेट किए गए मान नहीं दिखाता है। आपको अपने फ़ंक्शन कॉल को $apply या '$ applyAyncc' के साथ पाचन चक्र को स्पष्ट रूप से शुरू करने की आवश्यकता है। एक काम उदाहरण देखें:

var app = angular.module('myapp', []);

app.controller('MyCtrl',
    function ($scope) {
        //initial data
        $scope.obj = [{
                "nome": "first",
                "status": 1,
                "testo": "Rottura rullo 1!!!"
            }];
            
        //this changes data
        $scope.printComments = function () {
            //$scope.obj=GetFromLocalStorage("AllComments");
            $scope.obj = [{
                "nome": "first",
                "status": 1,
                "testo": "Rottura rullo 1!!!"
            }, {
                "nome": "second",
                "status": 0,
                "testo": "Rottura rullo fsdfsf!!!"
            }];
            console.log("ricevo evento e ricarico tabella");
            console.log($scope.obj);
        };
        
        var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
        var eventer = window[eventMethod];
        var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
        eventer(messageEvent, function (e) {
            console.log("ricevo messaggio");
            //kick in $digest
            $scope.$apply($scope.printComments);
        }, false);	
        
        //emulate message in 3 secs
        setTimeout(function(){ window.dispatchEvent( new Event(messageEvent) ); }, 3000);
    }
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-controller="MyCtrl" ng-app="myapp">
  <table>
    <tr ng-repeat="item in obj track by $index">
      <td class="plantCell">{{item.nome}}: </td>
      <td class="statusCell">{{item.status}}</td>
      <td class="statusCell">{{item.testo}}</td>
    </tr>
  </table>
</div>


यह वास्तव में आपके प्रश्न का उत्तर नहीं देता है लेकिन आप इसके बजाय पर्यावरण चर का उपयोग कर सकते हैं:

"scripts": {
    "start": "PORT=3000 node server.js"
}

फिर अपने सर्वर.जेएस फ़ाइल में:

var port = process.env.PORT || 3000;




javascript angularjs multithreading html-table