Heim > Artikel > Web-Frontend > Implementieren Sie die dynamische Kompilierung von Methoden, die über AngularJS zu dom hinzugefügt wurden

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

高洛峰Original: 2017-03-25 16:12:111774Durchsuche

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>

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

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispielanalyse der AngularJS-BenutzerauswahldirektiveNächster Artikel：Beispielanalyse der AngularJS-Benutzerauswahldirektive

In Verbindung stehende Artikel

Mehr sehen