suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der statischen Vorlage_AngularJS für die AngularJS-Initialisierung

Detaillierte Erläuterung der statischen Vorlage_AngularJS für die AngularJS-Initialisierung

WBOY
WBOYOriginal
2016-05-16 15:20:021118Durchsuche

AngularJS kann das Modul automatisch über ng-app initialisieren oder die Anwendung manuell über angle.bootstrap(document, [module]) starten. Unabhängig davon, welche Methode verwendet wird, werden die Dom-Elemente dynamisch angezeigt Zum Dom-Baum hinzugefügt, Winkelanweisungen können nicht ausgeführt werden, d. h. Daten und Ereignisse können nicht über ng-model und ng-click an dynamisch hinzugefügte Dom-Elemente gebunden werden. Was soll ich tun?

Es ist sehr üblich, DOM-Elemente dynamisch hinzuzufügen, z. B. durch Klicken auf eine Schaltfläche zum Ändern von Benutzerinformationen auf einer Seite, Senden einer Ajax-Anfrage zum Abfragen von Benutzerinformationen und anschließendes Kompilieren der zuvor geschriebenen statischen Vorlage mithilfe der Vorlagen-Engine Fügen Sie die Seite schließlich in einen HTML-String ein und zeigen Sie ihn wie folgt an: 

<!DOCTYPE html>
<html ng-app="app">
<head>
  <title>demo</title>
  <meta charset="utf-8"/>
  <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
  <script id="others_angular_103" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/other/angular.min.js"></script>
  <style>
    .contani{
      width: 100%;
      height: 300px;
      border: 1px solid red;
    }
  </style>
</head>
<body ng-controller="myCtrl">
<script>
  var app = angular.module('app',[]);
  app.controller('myCtrl', ['$scope','$compile',function(scope,$compile){
    scope.valchange = function(){
      console.log('value change')
    }
    scope.edit = function(){
      //假设这是ajax返回的数据
      scope.username = 'wangmeijian';
      scope.password = '000000';
      $(".contani").html(myTmpl.innerHTML);
    }
  }])
</script>
<button ng-click="edit()">修改资料</button>
<div class="contani"></div>
<script type="text/html" id="myTmpl">
  <form>
    用户名：<input type="text" ng-model="username" />
    密码：<input type="text" ng-model="password" />
  </form>
</script>
</body>
</html>

Klicken Sie auf die Schaltfläche „Daten ändern“. Das liegt daran, dass das neu eingefügte DOM-Element nicht an die von Ajax zurückgegebenen Daten gebunden ist. Die Lösung besteht natürlich nicht darin, es erneut zu initialisieren, sondern zu verwenden $compile zum Kompilieren des statischen HTML-Codes der Vorlage wird dann in den Dom-Baum
eingefügt 

<!DOCTYPE html>
<html ng-app="app">
<head>
  <title>demo</title>
  <meta charset="utf-8"/>
  <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
  <script id="others_angular_103" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/other/angular.min.js"></script>
  <style>
    .contani{
      width: 100%;
      height: 300px;
      border: 1px solid red;
    }
  </style>
</head>
<body ng-controller="myCtrl">
<script>
  var app = angular.module('app',[]);
  app.controller('myCtrl', ['$scope','$compile',function(scope,$compile){
    scope.valchange = function(){
      console.log('value change')
    }
    scope.edit = function(){
      //假设这是ajax返回的数据
      scope.username = 'wangmeijian';
      scope.password = '000000';
      //$(".contani").html(myTmpl.innerHTML);
      $(".contani").append( $compile(myTmpl.innerHTML)(scope) )
    }
  }])
</script>
<button ng-click="edit()">修改资料</button>
<div class="contani"></div>
<script type="text/html" id="myTmpl">
  <form>
    用户名：<input type="text" ng-model="username" ng-change="valchange()" />
    密码：<input type="text" ng-model="password" ng-change="valchange()" />
  </form>
</script>
</body>
</html>

Das Obige ist eine detaillierte Einführung in die statische AngularJS-Initialisierungsvorlage. Ich hoffe, dass sie für das Lernen aller hilfreich sein wird.

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：Analyse des Ladens und Ausführens von JavaScript-Skripten in einer Browserumgebung: Eigenschaften verzögern und asynchronisieren_Javascript-FähigkeitenNächster Artikel：Analyse des Ladens und Ausführens von JavaScript-Skripten in einer Browserumgebung: Eigenschaften verzögern und asynchronisieren_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen