Maison >interface Web >js tutoriel >Explication détaillée du modèle statique d'initialisation AngularJS_AngularJS

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

WBOYoriginal: 2016-05-16 15:20:021142parcourir

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>

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>

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Analyse du chargement et de l'exécution de scripts JavaScript dans un environnement de navigateur : caractéristiques différées et asynchrones_compétences JavascriptArticle suivant：Analyse du chargement et de l'exécution de scripts JavaScript dans un environnement de navigateur : caractéristiques différées et asynchrones_compétences Javascript

Articles Liés

Voir plus