각도 컴파일

Question

나는 지시어 S와 O는 JS는 객체이

<synergy-chart series="s" options="o"/> 

처럼해야 컨트롤러 에서 동적으로 지시를 인세해야

나는 내가 할 수있는 컨트롤러 내부에 대해 생각했다 매개 변수가

var directive = $('<synergy-chart series="'+series+'" options="'+$scope.widget.options+'"/>'); 
$compile(directive)($scope); 
$element.find('.panel-body').html(directive); 

이 내가 필요하기 때문에이 지침이 방법은 작동 매개 변수가 필요하지 않은 경우이 처럼 할 수 있지만, 정확한 방법이 아님

Answer 1

지시어를 HTML 파일에 넣고 ng-show 또는 ng-if를 사용하여 지시문의 표시 여부를 결정할 수 있습니까?

<synergy-chart ng-show="showDirective" series="s" options="o"/> 

컨트롤러에서 지시문을 설정하는 경우 '$'대신 angular.element를 사용하십시오.

var directive = angular.element('<synergy-chart series="$scope.series" options="$scope.widget.options"/>'); 

$compile(directive)($scope); 
$element.find('.panel-body').html(directive); 

Answer 2

으로 간단한. 컴파일/링크 함수의 기본 동작은 synergyChart 지시어가있는 요소의 자식으로 템플릿을 삽입하는 것입니다.

구성 가능한 특성 대신 컨트롤러에 지시문을 추가하고 지시문에서 컨트롤러의 구성 가능한 속성을 검색하도록 할 수 있습니다. 이는 지시어의 구성 가능한 속성을 다른 방식으로 설정할 수있는 이점을 제공합니다 (예 : 서비스, 공장 또는 다른 지시문).

<div class="panel-body" synergy-chart="" synergy-chart-series="s" synergy-chart-options="o"> 
</div> 

<script> 
     app.directive('synergyChart', function() { 
      return { 
       restrict: 'A', 
       scope: { series: '@synergy-chart-series', options: '=synergy-chart-options' }, 
       template: '<synergy-chart series="{{series}}" options="{{options}}"/>' 
      } 
     }; 
</script> 

Answer 3

이 구성 속성에 대한 표현을 바인딩 synergyChart 지시어, 분리 범위, 및 사용자 정의 템플릿을 만들 시도해보십시오로

var directive = angular.element('<synergy-chart series="'+series+'" options="'+$scope.widget.options+'"/>'); 
$compile(directive)($scope);