Question

我想在点击时附加此元素：

<data-my-template/>

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>

  <title>Angular</title>
  <!-- CSS  -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>  
</head>

<body ng-app="myApp">

<div id="line"></div>        

<button id="insert"> Insert </button>
<data-my-template/>


<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
<script src="app.js"></script>
</body>
</html>

template.html

<div class="row"> 
  <ul class="collection">
    <li class="collection-item avatar">
        <i class="material-icons circle">folder</i>
      <span class="title" ng-controller="name"> <b> {{ user.name + " " + user.surname }} </b></span>
      <p>First Line <br>
         Second Line
      </p>
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
   </ul>
</div>

app.js

// data

var name = "John";
var surname = "Doe";


// codes

var myApp = angular.module('myApp', []);

  myApp.controller('name', ['$scope', function($scope) {
    $scope.user = {
      name: name,
      surname: surname
    };    
  }])

  myApp.directive('myTemplate', function() {
    return {      
      templateUrl: 'template.html'
    };
  });


// events

$('#insert').click(insert);

function insert(){

angular.element('#line').append("<div>TEST</div>");

angular.element('#line').append("<data-my-template/>");

}

Answer 1

您可以使用以下代码作为解决方案：

<强> JS（app.js）：

var myEl = angular.element( document.querySelector( '#line' ) );
myEl.append('Hi<br/>'); 
myEl.append('<data-my-template/>');

上面的代码会附加<data-my-template></data-my-template>，结果如下：

<div id="line">
    Hi<br>
    <data-my-template></data-my-template>
</div>

查看我的JSFIDDLE

如果对此有任何疑问，请与我们联系。

Answer 2

我得到的最好的是：

<强> HTML ...

<div id="line"></div>        

<button id="insert"> Insert </button>
...

<强> JS

...
$('#insert').click(insert);

function insert(){

    var $div = $('<data-my-template/>');

    $('#line').append($div);

    angular.element('#line').injector().invoke(function($compile) {
      var scope = angular.element($div).scope();
      $compile($div)(scope);
    });
}
...

Answer 3

您使用$compile服务关闭了答案，但是所有这些用于点击处理程序的jQuery都不是很好。

首先，不要重新发明轮子，angular有办法为你添加一个点击处理程序（ng-click）第二个从不操纵控制器中的DOM，使用指令。（毕竟那是所有不同的ng-*事物）。

无论如何要问这个问题。只需创建一个“创建者”＆＃39;指示。它应用于一个元素，将使用$compile服务并将您的内容添加到其应用的元素中。如果您愿意，可以对该内容进行硬编码，以便拥有一对myTemplate和myTemplateCreator指令。您可以将其设为通用，并将内容传递到您想要生成的内容中。为了便于使用，我对它进行了硬编码。

所以完整地说：

myApp.directive("add", function($compile){
    return {
        restrict: "A",
        template: '<button ng-click="add()">Click to add buttons</button>',
        link: function ($scope, e, a) {
          var count = 0;
          $scope.add = function() {
            /*
                The single quotes around count are important. The count attribute is a scope variable.
                It is databound so what angular would do without the single quotes is look for a scope 
                variable called count to bind with. We don't want that we just want to pass it a single
                string value. Hence the extra single quotes.
            */
            var str = "<alert count=\"'" + count + "'\"></alert>";

            angular.element(e).append($compile(str)($scope));

            //Just so you can each add is different
            count += 1;
          }
        }
    }
});

它将做的是在其应用的元素中注入一个按钮。每次单击该按钮时，它都会将一个名为alert的指令注入同一元素并递增计数器。（alert指令只使用该计数器，因此您可以判断每个新的alert指令是不同的）

您不必使用按钮来实际创建。该指令可以监听事件，因此$scope.$on()它可以公开控制器调用的方法，甚至可以监视范围变量。

重要的是要注意$compile服务还需要创建的内容将使用的范围。我的add指令使用继承的范围，因此创建的内容将与创建add指令的元素具有相同的范围。这也不是一成不变的。

Compile Docs和 Fiddle Example

任何问题或任何问题。

Angular append元素onclick

3 个答案: