Question

我必须从控制器动态插入指令该指令应该是这样的

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

其中s和o是js对象

我从控制器里面想着我能做到这一点如果指令不需要参数，则此方法有效但由于需要参数

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="'+series+'" options="'+$scope.widget.options+'"/>');
$compile( directive)( $scope );

Answer 2

简单如下：

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

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

Answer 3

尝试创建synergyChart指令，隔离范围，可配置属性的绑定表达式以及自定义模板。编译/链接函数的默认行为是将模板作为具有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>

角度编译

3 个答案: