Implementieren Sie die dynamische Kompilierung von Methoden, die über AngularJS zu dom hinzugefügt wurden-js-Tutorial-php.cn

Implementieren Sie die dynamische Kompilierung von Methoden, die über AngularJS zu dom hinzugefügt wurden

高洛峰

Freigeben： 2017-03-25 16:12:11

Original

1774 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie AngularJS die dynamische Kompilierung implementiert und zum Dom hinzufügt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Bei der Verwendung von AngularJS hoffe ich, die Angular-Vorlage dynamisch zu erstellen und sie dann über Angular anzuzeigen. Die Verwendungsmethode von

ist wie folgt:

<html ng-app="app">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="assets/angular.min.js"></script>
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/handlebars.min.js"></script>
  <script src="assets/Handlebars.helper.js"></script>
  <script >
  var app=angular.module("app",[]);
  app.controller(&#39;ctrl&#39;, [&#39;$scope&#39;,&#39;$compile&#39;,function($scope,$compile){
    $scope.userName=&#39;RAY&#39;;
    $scope.test = function test(){
      console.log(&#39;你好:&#39; +$scope.userName);
    }
    //通过$compile动态编译html
    var html="<button ng-click=&#39;test()&#39;>{{userName}}</button>";
    var template = angular.element(html);
    var mobileDialogElement = $compile(template)($scope);
    angular.element(document.body).append(mobileDialogElement);
  }]);
  </script>
</head>
<body ng-controller="ctrl">
</body>
</html>

Nach dem Login kopieren

var html="<button ng-click=&#39;test()&#39;>{{userName}}</button>";

Nach dem Login kopieren

Diese Art von Code ist die Angular-Vorlage. Durch Kompilieren mit dem AngularJS-Compiler können Sie auf die Objektdaten zugreifen der Winkelumfang.

Das Obige ist der Inhalt der Methode der dynamischen Kompilierung und Hinzufügung von AngularJS zum Dom. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Verwandte Artikel:

AngularJS generiert dynamisch Div-IDs

AngularJs lädt Module und Abhängigkeiten dynamisch

AngularJS implementiert die Methode zum Binden von Ereignissen an dynamisch generierte Elemente