एंगुलरजेएस निर्देश टेम्पलेट अपडेट नहीं कर रहा है अगर स्कोप AJAX

Question

के माध्यम से पॉप्युलेट किया गया है, तो मैंने इस सवाल को सटीक शीर्षक के रूप में देने की कोशिश की।
मैं अंगुलरजेएस के लिए काफी नया हूं लेकिन मैं इस मुद्दे पर फंस गया हूं। मैंने अपनी समस्या को बेहतर तरीके से चित्रित करने के लिए एक jsfiddle बनाने की कोशिश की लेकिन यह बहुत अलग फाइलों पर निर्भर करता है। और हां यह अभी तक ऑनलाइन नहीं है, इसलिए verbosity के साथ भालू। :)

तो बुनियादी तौर पर मैं एक ऐप्स मैं yeoman init angular के साथ बनाया गया है, और मेरी app.js इस तरह दिखता है:

"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 ऊपर उठाता है app.js और एक लंगर का संदर्भ देता है #/lineup, प्रभावी रूप से खुलता है views/lineup.html है; चीजों को सरल बनाने के लिए, मान लीजिए कि बाद वाले में केवल (कस्टम) <playerlist></playerlist> टैग शामिल है।
निर्देशक नियंत्रक फ़ंक्शन के अंदर मुझे यकीन है कि $.get("/players") काम करता है क्योंकि यह क्रोम के नेटवर्क टैब से देख सकता है कि प्रतिक्रिया खिलाड़ियों की एक सरणी के रूप में सही ढंग से आती है।

<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> 

मेरा विचार LineupCtrl से "playerlist" निर्देश स्वतंत्र बनाने के लिए मैं यह परियोजना में कहीं और पुन: उपयोग करने के लिए चाहते हो सकता है किया गया था:
अंत में, मेरी views/directives/playerlist.html कोड कि <playerlist> टैग, जो इस प्रकार की जगह है।
ठीक है तो यहां जाता है: जब मैं एंकर पर क्लिक करता हूं जो पहली बार #/lineup लोड करता है, तो ऊपर की तालिका के tbody तत्व खाली है (इसमें कोई पंक्तियां शामिल नहीं हैं); मजाकिया बात यह है कि, जब मैं दूसरी बार उस पर क्लिक करता हूं, तो तालिका $.get("/players") निर्देश के साथ प्राप्त खिलाड़ियों के साथ सही ढंग से आबादी होती है। मुझे संदेह है कि यह प्लेयरलिस्ट.html और $ scope.players चर के असाइनमेंट के बीच होने वाली मामूली अंतराल के कारण होता है। लेकिन क्या यह एक कोणीय ऐप का पूरा बिंदु नहीं है? जब स्कोप वेरिएबल संबंधित विचारों को बदलते हैं (और उनके टेम्पलेट्स) को अद्यतन किया जाता है?
कृपया मदद करें!
चीयर्स,

एंड्रिया

Answer 1

जब भी आप एक कोणीय समारोह के बाहर गुंजाइश चर अपडेट करेंगे तो आपको कोणीय बताने के लिए है कि कुछ बदल की जरूरत है। scope.$apply देखें।

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

एक अलग टिप्पणी पर, कोणीय एक ajax service में बनाया गया है, इसलिए jQuery का उपयोग करने की आवश्यकता नहीं है। ट्यूटोरियल में एक अच्छी व्याख्या मिल सकती है: 5 - XHRs & Dependency Injection।