使用 AngularJS 在控制器中动态创建项目

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

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

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

content.appendChild(mydir);
})

Answer 2

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

不太清楚你到底想达到什么目的。您可能希望将 ng-include 与控制器作用域上设置的模板的动态路径一起使用并在控制器中 $scope.path = 'templates/my_template_1.html';

Answer 3

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

my template data coming from server dynamicly and using inside the controller is the best solution for me

嗯，不推荐，但是可以。请参阅下面的示例：

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>

使用 AngularJS 在控制器中动态创建项目

Creating item dynamically in controller with AngularJS

javascript

angularjs

jqlite

ionic-framework