Rumah >hujung hadapan web >tutorial js >Penjelasan terperinci tentang template statik permulaan AngularJS_AngularJS

Penjelasan terperinci tentang template statik permulaan AngularJS_AngularJS

WBOYasal: 2016-05-16 15:20:021146semak imbas

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>

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>

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Analisis pemuatan dan pelaksanaan skrip JavaScript dalam persekitaran penyemak imbas: tangguh dan ciri async_kemahiran javascriptArtikel seterusnya：Analisis pemuatan dan pelaksanaan skrip JavaScript dalam persekitaran penyemak imbas: tangguh dan ciri async_kemahiran javascript

Artikel berkaitan

Lihat lagi