Detaillierte Erläuterung der statischen Vorlage_AngularJS für die AngularJS-Initialisierung-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 15:20:02

Original

1146 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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