Question

我在工厂中有一个方法可以动态地将控件添加到菜单中。它需要动态创建，因为根据用户的不同，控件也会不同。我已经阅读了StackOverflow上的帖子并看到了一些建议，比如创建一个单独的指令或者在之后编译元素。我无法绕过这些解决方案。

这是功能：

factory.addCtrl = (name, icon) -> ctrlCenter = angular.element("#control-container") ctrl = angular.element("<div ng-click=\"togglePanel('bottom', '#{name}')\">#{icon} #{name}</div>") ctrlCenter.append(ctrl) $compile(ctrlCenter)($rootScope)

我也想知道注入$rootScope仅仅是为了编译工作是一个'好'的解决方案吗？或者这是否意味着我使用它不正确，它真的应该发生在控制器内？该元素已创建，但ng-click函数实际上并不起作用，这意味着它未完全编译。

Answer 1

如果我得到你想要的动态添加代码到你的html将被编译，所以你将能够使用ng-click等等.... 我在我的项目中为它创建了一个指令...它可能会帮助你：

app.directive('ngHtmlCompile',function ($compile) {
      return function(scope, element, attrs) {
          scope.$watch(
            function(scope) {
               // watch the 'compile' expression for changes
              return scope.$eval(attrs.ngHtmlCompile);
            },
            function(value) {
              // when the 'compile' expression changes
              // assign it into the current DOM
              element.html(value);

              // compile the new DOM and link it to the current
              // scope.
              // NOTE: we only compile .childNodes so that
              // we don't get into infinite loop compiling ourselves
              $compile(element.contents())(scope);
            }
        );
    };
});

并在html中：

<div ng-html-compile="sprAnswerHTML"></div>

然后您可以在控制器中添加：

$scope.sprAnswerHTML =
     '<h2>{{ltgLabels.SPR_QUESTION_ANSWER}}</h2>';

自然这也适用于所有角度函数和指令/事件

希望这会有所帮助

$ compile动态创建angular元素，在工厂中使用$ rootScope

1 个答案: