Mẫu hướng dẫn AngularJS không cập nhật nếu phạm vi được điền thông qua ajax

Question

Tôi đã cố gắng đặt câu hỏi này chính xác như một tiêu đề nhất có thể.
Tôi khá mới với AngularJS nhưng tôi bị dẫm lên vấn đề này. Tôi đã cố gắng để làm cho một jsfiddle minh họa tốt hơn vấn đề của tôi nhưng nó dựa trên quá nhiều tập tin riêng biệt. Và than ôi nó vẫn chưa trực tuyến, vì vậy chịu đựng sự rách rưới. :)

Vì vậy, về cơ bản tôi có một ứng dụng tôi đã xây dựng với yeoman init angular, và app.js của tôi trông như thế này:

"use strict" 

var myApp = angular.module("myApp", []) 
.config(function($routeProvider) { 
    $routeProvider 
    .when("/lineup", { 
     templateUrl: "views/lineup.html", 
     controller: "LineupCtrl" 
    }) 
    //other routes 
    .otherwise({ 
     redirectTo: "/" 
    }); 
}) 
.directive("playerlist", function() { 
    return { 
     restrict: "E", 
     transclude: false, 
     scope : {}, 
     templateUrl : "views/directives/playerlist.html", 
     controller : function($scope) { 
      $.get("/players") 
      .success(function(players) { 
       $scope.players = players; 
      }); 
     }, 
     replace : true 
    } 
}); 

index.html chọn My lên app.js và có một neo tham chiếu #/lineup, mà hiệu quả mở views/lineup.html; để đơn giản hóa mọi thứ, giả sử sau chỉ chứa thẻ (tùy chỉnh) <playerlist></playerlist>.
Bên trong chức năng điều khiển của chỉ thị Tôi chắc chắn rằng $.get("/players") hoạt động như nó phải vì tôi có thể nhìn thấy từ tab mạng của chrome rằng phản hồi đi qua chính xác như một mảng người chơi.
Cuối cùng, tôi views/directives/playerlist.html có mã thay thế thẻ <playerlist>, mà sau:

<table class="table table-striped"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Age</th> 
      <th>Role</th> 
      <th>Strength</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="player in players"> 
      <td>{{player.first_name}} {{player.last_name}}</td> 
      <td>{{player.age}}</td> 
      <td>{{player.role}}</td> 
      <td>{{player.strength}}</td> 
     </tr> 
    </tbody> 
</table> 

Ý tưởng của tôi là để làm cho "playerlist" chỉ thị độc lập từ LineupCtrl cho tôi có thể muốn sử dụng lại nó ở nơi khác trong dự án.
Ok như vậy ở đây đi: khi tôi nhấp vào neo tải #/lineup lần đầu tiên, phần tử tbody của bảng trên trống (không có hàng nào được nối thêm vào nó); điều buồn cười là, khi tôi nhấp vào nó lần thứ hai, bảng được điền chính xác với những người chơi tôi nhận được với hướng dẫn $.get("/players"). Tôi nghi ngờ điều này là do độ trễ nhỏ xảy ra giữa việc hiển thị playerlist.html và biến $ scope.players được gán. Nhưng không phải là toàn bộ quan điểm của một ứng dụng góc? Điều đó khi các biến phạm vi thay đổi các khung nhìn tương ứng (và các mẫu của chúng) được cập nhật?
Vui lòng trợ giúp!
Chúc mừng,

Andrea

Answer 1

Bất cứ khi nào bạn cập nhật các biến phạm vi bên ngoài của một chức năng góc, bạn cần phải nói với góc điều gì đó thay đổi. Xem scope.$apply.

$.get("/players") 
.success(function(players) { 
    $scope.$apply(function() { 
    $scope.players = players; 
    }); 
}); 

Trên ghi chú khác, góc có sẵn được xây dựng trong ajax service, vì vậy không cần sử dụng jQuery. Một lời giải thích tốt có thể được tìm thấy trong hướng dẫn: 5 - XHRs & Dependency Injection.