Question

我创建了一个自定义指令，如下所示。

 app.directive('myDirective', function () {
    return {
        template: '<h1>This is myDirective</h1>',
        restrict: 'E',
        replace: true,
        link: function (scope, element, attrs) {

        }
    };
});

我的HTML代码如下所示。

<ion-view view-title="Search">
  <ion-content>
      <div id="myid"></div>
   </ion-content>
</ion-view>

最后，我的控制器如下所示。我想在控制器内动态创建my-directive元素，如下所示。但它不起作用。你知道解决这个问题的方法吗？提前致谢！！

app.controller('Search', function ($scope) {
    var content = document.getElementById("myid");
    content.setAttribute("class", "list");
    var mydir = document.createElement("my-directive");

    content.appendChild(mydir);
})

Answer 1

不确定这背后的原因是什么：

我的模板数据动态地来自服务器并在内部使用控制器是我的最佳解决方案

嗯，不推荐，但是，你可以做到。请参阅以下示例：

var app = angular.module("sa", []);

app.controller("Search", function($scope, $compile) {

  $scope.doTheBadThing = function() {
    var $parent = angular.element(document.getElementById("myid"));
    $parent.addClass("list");
    var mydir = document.createElement("my-directive");
    // or
    //var mydir = "<my-directive></my-directive>"; 
    $parent.append(mydir);

    // This is the main thing. You need to compile the dynamic HTML so that Angular can initialized on those template
    $compile($parent.contents())($scope);
  };
});

app.directive('myDirective', function() {
  return {
    template: '<h1>This is myDirective</h1>',
    restrict: 'E',
    replace: true,
    link: function(scope, element, attrs) {

    }
  };
});

#myid {
  background: #ccc;
  min-height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="Search">
  <button ng-click="doTheBadThing()">Do the bad thing</button>
  <div id="myid"></div>
</div>

Answer 2

你可以像这样在控制器中调用指令

app.controller('Search', function ($scope) {
var content = document.getElementById("myid");
content.setAttribute("class", "list");
var mydir = <my-directive></my-directive>;

content.appendChild(mydir);
})

Answer 3

从控制器操作DOM是一个非常糟糕的主意。你永远不应该这样做，因为它会在控制器和视图之间产生紧密耦合。

目前尚不清楚您究竟想要实现的目标。您可能希望将ng-include与动态路径一起使用到控制器范围上的模板集并在控制器中 $ scope.path ='templates / my_template_1.html';

使用AngularJS

3 个答案: