AngularJS初始化静态模板详解

 更新时间:2016年01月14日 09:24:54   投稿:lijiao  
这篇文章主要为大家介绍了AngularJS初始化静态模板,AngularJS初始化静态模板有两种方式,一是通过ng-app来自动初始化模块,也可以通过angular.bootstrap(document, [module])手动启动应用,感兴趣的小伙伴们可以参考一下

AngularJS可以通过ng-app来自动初始化模块,也可以通过angular.bootstrap(document, [module])手动启动应用,不管用哪种方法,应用启动后,动态往dom树里面添加的dom元素,无法执行angular指令,即无法通过ng-model、ng-click给动态添加的dom元素绑定数据和事件,怎么办?

动态添加dom元素的场景非常常见,如点击某页面上修改用户资料的按钮,发送ajax请求去查询用户资料,然后通过模板引擎将事先写在页面里的静态模板编译成HTML字符串,最后将HTML字符串append到页面显示出来,一般情况下我们会这样做:

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

点击修改资料按钮,新插入的dom元素并没有绑定ajax返回的数据,这是因为点击按钮前angular已经初始化完毕了,解决办法当然不是再初始化一次,而是单独使用$compile编译静态模板的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(){
      //假设这是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>

以上就是关于AngularJS初始化静态模板的详细介绍,希望对大家的学习有所帮助。

相关文章

  • 深入理解angular2启动项目步骤

    深入理解angular2启动项目步骤

    本篇文章主要介绍了深入理解angular2启动步骤 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • angular6的响应式表单的实现

    angular6的响应式表单的实现

    这篇文章主要介绍了angular6的响应式表单的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • angular ng-click防止重复提交实例

    angular ng-click防止重复提交实例

    本篇文章主要介绍了angular ng-click防止重复提交实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Angular实现表格自滚动效果

    Angular实现表格自滚动效果

    这篇文章主要为大家介绍了如何通过Angular实现表格自动滚动的效果,文中的示例代码讲解详细,对我们学习Angular有一定帮助,需要的可以参考一下
    2022-01-01
  • Angular Component属性绑定target和attr.target的区别分析

    Angular Component属性绑定target和attr.target的区别分析

    这篇文章主要介绍了Angular Component属性绑定target和attr.target的区别分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • AngularJS实现数据列表的增加、删除和上移下移等功能实例

    AngularJS实现数据列表的增加、删除和上移下移等功能实例

    这篇文章给大家分享了AngularJS循环实现数据列表的增加、删除和上移下移等基础功能,对大家学习AngularJS具有一定的参考借鉴价值,有需要的朋友可以看看。
    2016-09-09
  • 深入理解Angularjs中$http.post与$.post

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

    本篇文章主要介绍了深入理解Angularjs中$http.post与$.post ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • Angularjs中三种数据的绑定策略(“@”,“=”,“&”)

    Angularjs中三种数据的绑定策略(“@”,“=”,“&”)

    在AngularJS的指令中存在着三种绑定策略,他们分别是’=’,’@’,’&’。下面这篇文章主要介绍了Angularjs中这三种数据的绑定策略,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-12-12
  • AngularJs中route的使用方法和配置

    AngularJs中route的使用方法和配置

    angular是Google开发的一个单页面应用框架,是现在比较主流的单页面应用框架之一,下面通过本文给大家介绍AngularJs中route的使用方法和配置,感兴趣的朋友一起学习吧
    2016-02-02
  • angular select 默认值设置方法

    angular select 默认值设置方法

    下面小编就为大家带来一篇angular select 默认值设置方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06

最新评论