欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)景非常常見,如點(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元素并沒有綁定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í)有所幫助。

相關(guān)文章

  • 深入理解angular2啟動(dòng)項(xiàng)目步驟

    深入理解angular2啟動(dòng)項(xiàng)目步驟

    本篇文章主要介紹了深入理解angular2啟動(dòng)步驟 ,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-07-07
  • angular6的響應(yīng)式表單的實(shí)現(xiàn)

    angular6的響應(yīng)式表單的實(shí)現(xiàn)

    這篇文章主要介紹了angular6的響應(yīng)式表單的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-10-10
  • angular ng-click防止重復(fù)提交實(shí)例

    angular ng-click防止重復(fù)提交實(shí)例

    本篇文章主要介紹了angular ng-click防止重復(fù)提交實(shí)例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • Angular實(shí)現(xiàn)表格自滾動(dòng)效果

    Angular實(shí)現(xiàn)表格自滾動(dòng)效果

    這篇文章主要為大家介紹了如何通過(guò)Angular實(shí)現(xiàn)表格自動(dòng)滾動(dòng)的效果,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)Angular有一定幫助,需要的可以參考一下
    2022-01-01
  • Angular?Component屬性綁定target和attr.target的區(qū)別分析

    Angular?Component屬性綁定target和attr.target的區(qū)別分析

    這篇文章主要介紹了Angular?Component屬性綁定target和attr.target的區(qū)別分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-07-07
  • AngularJS實(shí)現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等功能實(shí)例

    AngularJS實(shí)現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等功能實(shí)例

    這篇文章給大家分享了AngularJS循環(huán)實(shí)現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等基礎(chǔ)功能,對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值,有需要的朋友可以看看。
    2016-09-09
  • 深入理解Angularjs中$http.post與$.post

    深入理解Angularjs中$http.post與$.post

    本篇文章主要介紹了深入理解Angularjs中$http.post與$.post ,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-05-05
  • Angularjs中三種數(shù)據(jù)的綁定策略(“@”,“=”,“&”)

    Angularjs中三種數(shù)據(jù)的綁定策略(“@”,“=”,“&”)

    在AngularJS的指令中存在著三種綁定策略,他們分別是’=’,’@’,’&’。下面這篇文章主要介紹了Angularjs中這三種數(shù)據(jù)的綁定策略,有需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。
    2016-12-12
  • AngularJs中route的使用方法和配置

    AngularJs中route的使用方法和配置

    angular是Google開發(fā)的一個(gè)單頁(yè)面應(yīng)用框架,是現(xiàn)在比較主流的單頁(yè)面應(yīng)用框架之一,下面通過(guò)本文給大家介紹AngularJs中route的使用方法和配置,感興趣的朋友一起學(xué)習(xí)吧
    2016-02-02
  • angular select 默認(rèn)值設(shè)置方法

    angular select 默認(rèn)值設(shè)置方法

    下面小編就為大家?guī)?lái)一篇angular select 默認(rèn)值設(shè)置方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06

最新評(píng)論