Explication détaillée du modèle statique d'initialisation AngularJS

Explication détaillée du modèle statique d'initialisation AngularJS_AngularJS

WBOY

Libérer： 2016-05-16 15:20:02

original

1144 Les gens l'ont consulté

AngularJS peut initialiser automatiquement le module via ng-app ou démarrer manuellement l'application via angulaire.bootstrap (document, [module]). Quelle que soit la méthode utilisée, une fois l'application démarrée, les éléments dom seront dynamiques. ajouté à l'arborescence dom, incapable d'exécuter des instructions angulaires, c'est-à-dire incapable de lier des données et des événements aux éléments dom ajoutés dynamiquement via ng-model et ng-click, que dois-je faire ?

Il est très courant d'ajouter dynamiquement des éléments DOM, comme cliquer sur un bouton pour modifier les informations utilisateur sur une page, envoyer une requête ajax pour interroger les informations utilisateur, puis utiliser le moteur de modèle pour compiler le modèle statique écrit à l'avance sur la page dans une chaîne HTML Enfin, ajoutez la chaîne HTML à la page et affichez-la Normalement, nous ferons ceci :
.

<!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>

Copier après la connexion

Cliquez sur le bouton Modifier les données. L'élément dom nouvellement inséré n'est pas lié aux données renvoyées par ajax, car angulaire a été initialisé avant de cliquer sur le bouton. La solution n'est bien sûr pas de l'initialiser à nouveau, mais de l'utiliser. $compile pour compiler le statique Le HTML du modèle est ensuite inséré dans l'arborescence dom

<!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>

Copier après la connexion

Ce qui précède est une introduction détaillée au modèle statique d'initialisation AngularJS. J'espère qu'il sera utile à l'apprentissage de chacun.