Question

我有一个模板文件myfile.html，并且我正在以angular形式编写属性指令，该指令的目的是在声明指令属性的元素之后插入myfile.html中的元素。。例如：将在该div之后插入myfile.html的所有内容。

我试着这样做：

＆＃13;

app.directive('myAngularDirective', function () {
  return {
    restrict: "A",
    link: function(scope, element){
      var addMe = angular.element("myfile.html");
      element.after($copile(addMe));
      scope.$apply();
    }
  }
});

＆＃13;

<h1>myfile.html</h1>
<div ng-controller="myController">
  <div ng-click=clickMe()></div>
</div>

＆＃13;

<h1>my home page</h1>
<div my-angular-directive></div>

＆＃13;

但没有任何反应，myfile.html的内容未添加到主页。

如果我在after函数中编写简单的html，如下所示： element.after（＆＃34;＆＃34）

它确实被添加到dom但角度不消化它，并且ng-click不起作用。

感谢您的帮助。

Answer 1

$compile("<html here>")返回一个模板函数，该函数需要在返回DOM之前传递范围。将您的代码更改为以下内容，它应该按预期工作：

app.directive('myAngularDirective', function($compile) {
  return {
    restrict: "A",
    link: function(scope, element){
      var addMe = angular.element("<div>Hello World</div>");
      element.after($compile(addMe)(scope));
      scope.$apply();
    }
  }
});

如果要从外部URL加载模板。您需要做模板请求。

app.directive('myAngularDirective', function($compile,$templateRequest) {
  return {
    restrict: "A",
    link: function(scope, element){
      $templateRequest('index.html').then(function(tpl){
        var addMe = angular.element(tpl);
        element.after($compile(addMe)(scope));
        scope.$apply();
      });
    }
  }
});

属性指令，用于从模板文件向dom添加元素

1 个答案: