Heim > Web-Frontend > js-Tutorial > Hauptteil

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

高洛峰
Freigeben: 2017-03-25 16:12:11
Original
1785 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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage