AngularJS初始化靜態(tài)模板詳解

更新時(shí)間：2016年01月14日 09:24:54 投稿：lijiao

這篇文章主要為大家介紹了AngularJS初始化靜態(tài)模板，AngularJS初始化靜態(tài)模板有兩種方式，一是通過(guò)ng-app來(lái)自動(dòng)初始化模塊，也可以通過(guò)angular.bootstrap(document, [module])手動(dòng)啟動(dòng)應(yīng)用，感興趣的小伙伴們可以參考一下

AngularJS可以通過(guò)ng-app來(lái)自動(dòng)初始化模塊，也可以通過(guò)angular.bootstrap(document, [module])手動(dòng)啟動(dòng)應(yīng)用，不管用哪種方法，應(yīng)用啟動(dòng)后，動(dòng)態(tài)往dom樹里面添加的dom元素，無(wú)法執(zhí)行angular指令，即無(wú)法通過(guò)ng-model、ng-click給動(dòng)態(tài)添加的dom元素綁定數(shù)據(jù)和事件，怎么辦？

動(dòng)態(tài)添加dom元素的場(chǎng)景非常常見(jiàn)，如點(diǎn)擊某頁(yè)面上修改用戶資料的按鈕，發(fā)送ajax請(qǐng)求去查詢用戶資料，然后通過(guò)模板引擎將事先寫在頁(yè)面里的靜態(tài)模板編譯成HTML字符串，最后將HTML字符串a(chǎn)ppend到頁(yè)面顯示出來(lái)，一般情況下我們會(huì)這樣做：

<!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(){
      //假設(shè)這是ajax返回的數(shù)據(jù)
      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>

點(diǎn)擊修改資料按鈕，新插入的dom元素并沒(méi)有綁定ajax返回的數(shù)據(jù)，這是因?yàn)辄c(diǎn)擊按鈕前angular已經(jīng)初始化完畢了，解決辦法當(dāng)然不是再初始化一次，而是單獨(dú)使用$compile編譯靜態(tài)模板的HTML，然后再插入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(){
      //假設(shè)這是ajax返回的數(shù)據(jù)
      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>

以上就是關(guān)于AngularJS初始化靜態(tài)模板的詳細(xì)介紹，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: