angularjs 및 d3js의 $ http 함수에서 내 범위가 손실되는 이유는 무엇입니까?

Question

나는 angularjs 및 d3js가있는 동적으로로드 된 데이터로 barchart를 그려하려고합니다. 내가 호출 할 때

$http.get('groups/all_groups.json').then($scope.groups = [10,20,30,40,60, 80, 20, 50]);

작동하고 내 지시에 데이터를 플롯 할 수 있습니다,하지만 난 다음

$http.get('groups/all_groups.json').then(function (response) { $scope.groups = [10,20,30,40,60, 80, 20, 50];} // eventually, here is dynamic data

을하려고 할 때 오류 얻을 :

형식 오류를 : 정의되지 않은 바인드 (http://d3js.org/d3.v2.js:3727:45) 의 'length'속성을 읽을 수 없습니다. Array.d3_selectionPrototype.data (http://d3js.org/d3.v2.js:3801:9) at directiveDefinitionObject.link

해당 지시문 내에서 d3js 범위가 설정되지 않았지만 http-response를 d3js로 "내보낼"수 있습니까? 편집

: 여기 는 지침입니다 :

.directive('barsChart', function ($parse) { 
    //explicitly creating a directive definition variable 
    //this may look verbose but is good for clarification purposes 
    //in real life you'd want to simply return the object {...} 
    var directiveDefinitionObject = { 
     //We restrict its use to an element 
     //as usually <bars-chart> is semantically 
     //more understandable 
     restrict: 'E', 
     //this is important, 
     //we don't want to overwrite our directive declaration 
     //in the HTML mark-up 
     replace: false, 

     //our data source would be an array 
     //passed thru chart-data attribute 
     scope: {data: '=chartData'}, 
     link: function (scope, element, attrs) { 
      //in D3, any selection[0] contains the group 
      //selection[0][0] is the DOM node 
      //but we won't need that this time 
      var chart = d3.select(element[0]); 
      //to our original directive markup bars-chart 
      //we add a div with out chart stling and bind each 
      //data entry to the chart 
      chart.append("div").attr("class", "chart") 
       .selectAll('div') 
       .data(scope.data).enter().append("div") 
       .transition().ease("elastic") 
       .style("width", function (d) { 
        return d + "%"; 
       }) 
       .text(function (d) { 
        return d + "%"; 
       }); 
      //a little of magic: setting it's width based 
      //on the data value (d) 
      //and text all with a smooth transition 
     } 
    }; 
    return directiveDefinitionObject; 

HTML 요소 :

<bars-chart chart-data="groups"></bars-chart> 

및 컨트롤러 :

.controller('View2Ctrl', ['$scope', '$http', 
    function ($scope, $http) { 
     $http.get('groups/all_groups.json').then(function (response) { 
      $scope.groups = [10,20,30,40,60, 80, 20, 50]; 
      console.log($scope.groups); 
     }, function(response){ 
      console.log('error'); 
     }); 
    }]) 

Answer 1

자바 스크립트 언어에서 모든 var에 (전역 기대 var)는 블록 함수 내부에서 정의됩니다. 코드에서 문맥을 잃었습니다 then(function (response) {. 이 함수에서 $ scope는 더 이상 존재하지 않습니다. 이 함수에서 이전 컨텍스트를 가져 오려면 this을 참조하십시오. 이와 같이 :

.controller('View2Ctrl', ['$scope', '$http', 
    function ($scope, $http) { 
     var vm = this; 
     $http.get('groups/all_groups.json').then(function (response) { 
      vm.$scope.groups = [10,20,30,40,60, 80, 20, 50]; 
      console.log(vm.$scope.groups); 
     }, function(response){ 
      console.log('error'); 
     }); 
    }])