Question

我需要从directive调用一个元素controller，而不是在html文件中编写它。

元素指令：

angular.module("providerApp")
         .directive("openTab", function () {
         return {
             restrict: 'E',
             templateUrl: '/resources/js/directiveView/openTab.html'
         }
     });

这个directive我想通过script中的控制器调用，而不是写入html文件。像这样：

控制器

angular.module("providerApp")
    .controller('appointmentsController', function() {
        $("<div>").append("<open-Tab></open-Tab>");
});

而不是写入html文件，如下所示。我想跳过在markUp中编写指令，因为它必须动态呈现并且它在dom中的位置不是固定的，这由controller确定

标记

 <html>
       <head></head>
       <body>
          <open-tab></open-tab>
       </body>
    </html>

Answer 1

您的代码也可以运行，只需要在将{DOM}添加到DOM之前使用$compile服务来编译DOM，但它在AngularJS中被认为是错误的模式。

从控制器执行DOM操作被认为是不好的做法角

最好你创建自己的指令，这将在身体层面。想要添加元素的控制器，$emit和事件向上selector＆amp; html。因此该指令将在DOM中添加该元素。

<强>控制器

app.controller('appointmentsController', function($scope) {
  $scope.$emit('ElementAppend', {
    selector: '#test',
    html: '<open-Tab></open-Tab>'
  });
});

<强>指令

app.directive('body', function($compile) {
  return {
    restrict: 'AE',
    compile: function(element, attributes) {
      return {
        pre: function(scope, element, attributes) {
          scope.$on('ElementAppend', function(e, data) {
            $(element).find(data.selector).append($compile(data.html)(scope));
          });
        }
      }
    },
  }
});

Demo

从控制器调用元素指令

1 个答案: