Penjelasan terperinci tentang template statik permulaan AngularJS

Penjelasan terperinci tentang template statik permulaan AngularJS_AngularJS

WBOY

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

asal

1146 orang telah melayarinya

AngularJS boleh memulakan modul secara automatik melalui ng-app, atau memulakan aplikasi secara manual melalui angular.bootstrap(dokumen, [modul]). Tidak kira kaedah yang digunakan, selepas aplikasi dimulakan, elemen dom akan dinamik ditambahkan pada pokok dom , tidak dapat melaksanakan arahan sudut, iaitu, tidak dapat mengikat data dan peristiwa untuk menambahkan elemen dom secara dinamik melalui ng-model dan ng-click, apakah yang perlu saya lakukan?

Adalah sangat biasa untuk menambah elemen DOM secara dinamik, seperti mengklik butang untuk mengubah suai maklumat pengguna pada halaman, menghantar permintaan ajax untuk menanya maklumat pengguna dan kemudian menggunakan enjin templat untuk menyusun templat statik yang ditulis terlebih dahulu pada halaman ke dalam rentetan HTML Akhir sekali, tambahkan rentetan HTML pada halaman dan paparkannya Biasanya kita akan melakukan ini:

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

Salin selepas log masuk

Klik butang ubah suai data Elemen dom yang baru dimasukkan tidak terikat pada data yang dikembalikan oleh ajax Ini kerana sudut telah dimulakan sebelum mengklik butang itu, tentu saja, bukan untuk memulakannya lagi $compile untuk menyusun statik HTML templat kemudian dimasukkan ke dalam pepohon 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>

Salin selepas log masuk

Di atas ialah pengenalan terperinci kepada templat statik permulaan AngularJS saya harap ia akan membantu pembelajaran semua orang.