AngularJS 지시문 - 속성 값을 범위 속성에 연결

내 응용 프로그램에서 차트에 angular-nvd3을 사용하고 있습니다. 지시어를 컨트롤러에 설정하는 대신 지시문에서 옵션을 전달하는 사용자 지정 지시문을 만들었습니다.AngularJS 지시문 - 속성 값을 범위 속성에 연결

보기 :

<nvd3-bar-chart></nvd3-bar-chart>

지침

angular.module('app.graphs') 
    .directive('nvd3BarChart', 
     function() { 
      return { 
       restrict: 'E', 
       replace: true, 
       template: '<nvd3 options="nvd3_options" data="bar_data" api="api"></nvd3>', 
       link: function(scope) { 
        scope.nvd3_options = { 
         chart: { 
          type: 'discreteBarChart',....

bar_data 속성은 컨트롤러에 설정하고 차트가 잘 작동합니다. 그러나 지시문을 다시 사용하여 컨트롤러의 다른 데이터 속성에 바인딩하려고합니다.

이와 비슷한 것. 기본적으로 분리 범위없이 지시어 내에서 템플릿에

//Temperature data would be set in controller 
<nvd3-bar-chart data="temperature_data"></nvd3-bar-chart> 

//Precipitation data would be set in controller 
<nvd3-bar-chart data="precipitation_data"></nvd3-bar-chart>

감사

출처

2016-08-11 ganeshran

내가 사용이 해결까지 끝난를 지정하여 맞춤 지시어에서 직접 속성.

angular가 지시어 마크 업을 템플릿 마크 업으로 대체하면 대체 된 html 행에 속성을 추가합니다.

출처

2016-08-15 09:19:44 ganeshran

scope: { 
dataParam: '@' 
}, 
template: '<nvd3 options="nvd3_options" data="{{dataParam}}" api="api"></nvd3>',

을 사용자 정의 지시어의 데이터 속성을 연결 :

template: '<nvd3 options="nvd3_options" data="{{dataParam}}" api="api"></nvd3>', 
link: function (scope, element, attr) { 
    scope.dataParam = attr.dataParam; 
}

출처

2016-08-11 10:34:18 Laurianti

해답을 주셔서 감사합니다. 다중 지시문 [nvd3BarChart (모듈 : app.graphs), nvd3]이 새롭거나 격리 된 범위를 묻습니다. – ganeshran

그러나 마크 업을 를 사용하면 템플릿에서 데이터 속성을 설정하지 않아도됩니다. 그러나 새로운 범위를 설정하고 내가 구문 오류 작동하지 않았다 내 대답 죄송 – ganeshran

작동하지 않는 매개 변수를 기반으로 교체하기 식의 2 열에서 '{'잘못된 키를 토큰은 나는 그것을 만들 않았지만 지시문의 템플리트에서 데이터 속성을 생략하고 지시문을 사용하는 동안이를 사용하여 작업하십시오. 각도 내 usecase 작동하므로 dom 렌더링하는 동안 특성을 병합하는 것 같다 :) – Laurianti

AngularJS 지시문 - 속성 값을 범위 속성에 연결

답변

관련 문제