각도 배열에 객체 배열 전달하기

Question

각도 컨트롤러에 객체 배열이 있습니다.

[{ 
    label: 'label1', 
    data: [{ 
      type: TimelineChart.TYPE.POINT, 
      at: new Date([2015, 1, 1]) 
      }, { 
      type: TimelineChart.TYPE.POINT, 
      at: new Date([2015, 2, 1]) 
     }] 
}, { 
    label: 'label2', 
    data: [{ 
      type: TimelineChart.TYPE.POINT, 
      at: new Date([2015, 1, 11]) 
     }, { 
      type: TimelineChart.TYPE.POINT, 
      at: new Date([2015, 1, 15]) 
     }] 
}]; 

모든 개체에는 Date 필드가 있습니다. 이 객체 배열을 내 지시문에 어떻게 전달할 수 있습니까?

나는 참조로 전달하는 시도 :

<div id= "chart" my-directive my-data="data"></div> 
$scope: { 
      myData: '=' 
     }, 
link: function($scope, $element, $attrs) { 
     function init() { 
      var data = $scope.myData; 
      var timeline = new TimelineChart($element[0], data); 
     } 

     $attrs.$observe("myData", init); 
     } 

그러나, 그것은 작동하지 않았다. 나는 undefined을 얻는다.

my-data="{{ data }}" 및 JSON.parse($attrs.myData)과 같은 속성으로 전달하는 경우 Date 필드로 인해 작동하지 않습니다.

Answer 1

나는 당신의 배열 객체가 $ scope에서 손실된다고 생각합니다. 확인을 위해 console.log ($ scope.myData)를 사용하십시오.

브라우저 콘솔에서 반환되는 내용을 확인하고 정의되지 않은 경우 console.log ($ scope); 그런 다음 응용 프로그램을 실행하십시오. 브라우저 콘솔로 이동하여 myData 객체을 찾을 때까지 $ parent를 확장하십시오. 부모 범위의 수를 센다.

당신이 3 부모 아래에 그것을 발견한다고 가정하면, 사용

$ 범위. $ 부모. $ 부모. 대신 $ scope.myData의 $ parent.myData.

이 작동합니다 :)

이

Answer 2

그것은 directive에 데이터를 전달하는 것은 매우 간단합니다. 내가 누락 된 부분은 범위라고 생각합니다. scope 대신 $scope을 사용하고 있습니다. 지시문 정의 객체는 scope이 아니고 $scope이 아닙니다. 그래서 당신이 그것을해야합니다.

scope: { //make it scope 
      myData: '=' 
     }, 
link: function($scope, $element, $attrs) { 
     function init() { 
      var data = $scope.myData; 
      var timeline = new TimelineChart($element[0], data); 
     } 

     $attrs.$observe("myData", init); 
     } 

다음은 fiddle