각도 - 컨트롤러 개체에 지시문 값을 바인딩하십시오.

Question

컨트롤러에서 지시문에 배열을 전달하려고합니다. 컨트롤러에서 배열 값이 업데이트 될 때 그 이유가 반영됩니다 지시어에 컨트롤러는 서비스에서 배열로 데이터를 가져오고 그 배열을 지시문에 전달하여 막대 그래프를 만들고 싶습니다. 아래 코드의 핵심 부분을 넣었습니다. 여기

내 최고 수준의 HTML입니다

<div dash-progress 
    graph-data="{{dashCtrl.myProgress}}"> 
</div> 
<div> 
    Other Stuff 
</div> 

지시어에 대한 나의 템플릿 HTML :

<div class="boxcontent" ng-show="dashCtrl.showProgress"> 
    <div class="chart-holder-lg"> 
     <canvas tc-chartjs-bar 
      chart-data="progress" 
      chart-options="options" 
      height="200" 
      auto-legend> 
     </canvas> 
    </div> 
</div> 

컨트롤러 :

angular 
    .module('myApp') 
    .controller('dashCtrl',['mySvc', 
    function(mySvc) { 

     var self = this; 
     this.myProgress = []; 

     this.getProgress = function() { 
      //logic must be in the service ! 
      mySvc.getProgress().then(function(success) { 
       self.myProgress = mySvc.progress; 
      }); 
     }; 
    }]); 

과 지침 :

angular 
.module('myApp') 
.directive('dashProgress', [function() { 
    return { 
     restrict: 'AE', 
     templateUrl: 'components/dashboard/progress.html', 
     scope: { 
      graphData: '@' 
      }, 
     link: function(scope,el,attrs) { 
      scope.progress = { 
       labels: ['Duration','Percent'], 
       datasets: [ 
        { 
        label: 'Duration', 
        data: [scope.graphData.duration] 
        }, 
        { 
        label: 'Percent', 
        data: [scope.graphData.percent] 
        }       
       ] 
      }; 
      scope.options = { }; 
     } 
    }   
}]); 

컨트롤러의 myProgress 개체의 초기 값을 설정하면 이러한 값이 지시문에 반영되지만 서비스에서 컨트롤러로 반환 될 때 필요한 실제 값을 얻지 못합니다. 대신 당신의 지침의 범위에서

Answer 1

,이를 사용하여

scope: { 
    graphData: '@' 
} 

시도 : =과 지침에 배열을 전달할 때

scope: { 
    graphData: '=' 
} 

Answer 2

1. {{ }}를 사용하지 마십시오. 지시어의 범위에 대한 참조를 전달하는 대신 뷰에 배열을 렌더링합니다.
2. 내가 아는 한, @은 일방적 인 바인딩 일뿐만 아니라 일회성 바인딩이며 대부분 문자열 값 (예 : 지시어 초기화 중에 html 속성 설정)에 사용해야합니다. @을 사용하려면 먼저 데이터를 JSON으로 변환 한 다음 {{ }}으로 지시문에 전달한 다음 지시문에서 다시 구문 분석하고 변경 한 후에 직접 지시문을 다시 컴파일해야합니다. 그러나 약간 과잉 될, 그렇지 않습니까?

결론은 그냥보기에서 중괄호를 제거하고의 범위를 지시어 값을 바인딩 =를 사용합니다.

보기

<div dash-progress 
    graph-data="dashCtrl.myProgress"> 
</div> 

지침

scope: { 
    graphData: '=' 
}, 

---

업데이트

한 가지 더보십시오.dashCtrl에서, 객체와 myProgress 포장 (당신이 더 많은 자기 설명으로 이름을 변경할 수 있습니다 -이 단지 예를)

this.graphData = { 
    myProgress: [] 
} 

this.getProgress = function() { 
    mySvc.getProgress().then(function(success) { 
     self.graphData.myProgress = mySvc.progress; 
    }); 
} 

그런 다음, 지시어 graphData을 통과 :

마지막으로

<div dash-progress 
    graph-data="dashCtrl.graphData"> 
</div> 

, scope.graphData을 scope.graphData.myProgress으로 대체하십시오. 이렇게하면 scope.graphData.myProgress이 항상 객체의 속성이므로 동일한 데이터를 참조하도록 할 수 있습니다.

여전히 작동하지 않는다면 수동으로 감시자를 사용하고 scope.progress 속성을 수동으로 업데이트해야합니다.