ค้นหาเว็บไซต์

javascript - อัปเดต AngularJS scope จาก callback แบบอะซิงโครนัสของไลบรารีบุคคลที่สาม


สวัสดี ฉันกำลังพยายามใช้ import.io เพื่อเก็บคะแนนฟุตบอลบางส่วน ฉันสามารถทำให้ JS ของพวกเขาทำงานกับ API และส่งข้อมูลได้ ปัญหาคือมันต้องอยู่ในขอบเขตส่วนตัวภายในตัวควบคุมเนื่องจากฉันไม่สามารถใช้ ng-repeat กับมันได้

มีใครสามารถบอกฉันได้ไหมว่าทำไม และถ้ามีใครมีคู่มือที่ดีเกี่ยวกับ Scope ก็คงจะมีประโยชน์มากกว่า

latestScores.controller('ScoresController', function ($scope) {
  $scope.pots = [];
  var io2 = new importio("XXX", "XXXXXX[API KEY]XXXXXXXX", "import.io");


    io2.connect(function (connected) {

        if (!connected) {
            console.error("Unable to connect");
            return;
        }


        var data;


        var callback = function (finished, message) {

            if (message.type == "DISCONNECT") {
                console.error("The query was cancelled as the client was disconnected");
            }

            if (message.type == "MESSAGE") {
                if (message.data.hasOwnProperty("errorType")) {

                    console.error("Got an error!", message.data);
                } else {
                    data = message.data.results;
                }
            }
            if (finished) {

                pots = data;
                console.log(pots); /* This gives me an object */
        }
       }
      io2.query({
      "connectorGuids": [
      "d5796d7e-186d-40a5-9603-95569ef6cbb9"],
    }, callback);
  });
     console.log($scope.pots); /* This gives me nothing */
});

คำตอบ #1

การผูกข้อมูลของ AngularJS ไม่สามารถรู้ได้เมื่อคุณอัปเดต scope ของคุณใน callback จากไลบรารีของบุคคลที่สาม

ในการเรียกกลับของคุณ ให้ทำดังนี้:

$scope.pots = dataReceived
$scope.$apply();

หากคุณต้องการข้ามการเรียก $scope.apply() คุณจำเป็นต้องใช้โมดูลพรอมิสของ Angular เอง (เรียกว่า $q) และห่อการเรียก API ของคุณเข้าไปในบริการ

นอกจากนี้ หาก API ของคุณใช้ WebSocket คุณควรสมัครสมาชิกกับเหตุการณ์ $scope.on('$destroy') เพื่อยกเลิกการเชื่อมต่อจาก API ของคุณเมื่อคอนโทรลเลอร์ถูกลบไป

คำตอบ #2

ng-repeat มีขอบเขตของตัวเอง ในกรณีของคุณคุณกำลังกำหนดข้อมูลให้กับตัวแปรท้องถิ่นแทนที่จะกำหนดให้กับตัวแปรในขอบเขต

เปลี่ยนโค้ดชิ้นนี้

if (finished) {

                pots = data;
                console.log(pots); /* This gives me an object */
        }

ถึง

if (finished) {

                $scope.pots = data;
                console.log($scope.pots); /* This gives me an object */
        }