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到页面显示出来,一般情况下我们会这样做: demo 修改资料 点击修改资料按钮,新插入的dom元素并没有绑定ajax返回的数据,这是因为点击按钮前angular已经初始化完毕了,解决办法当然不是再初始化一次,而是单独使用$compile编译静态模板的HTML,然后再插入dom树中 demo 修改资料 以上就是关于AngularJS初始化静态模板的详细介绍,希望对大家的学习有所帮助。 您可能感兴趣的文章: AngularJS 路由和模板实例及路由地址简化方法(必看) AngularJS入门教程(二):AngularJS模板 AngularJS入门教程(一):静态模板 Angularjs实现页面模板清除的方法 AngularJS 静态模板 相关文章 Angular ng-repeat 对象和数组遍历实例 这篇文章主要介绍了Angular ng-repeat对象和数组遍历的相关资料,并附代码示例,需要的朋友可以参考下 2016-09-09 Angular.js实现多个checkbox只能选择一个的方法示例 这篇文章主要给大家介绍了利用Angular.js实现多个checkbox只能选择一个的方法,文中给出了详细的示例代码,相信对大家具有一定的参考价值,下面来一起看看吧。 2017-02-02 解决Angular.Js与Django标签冲突的方案 AngularJS和django的模板都是用{{}}来引用变量的,这就导致了冲突,所以这篇文章主要就给大家介绍了如何解决Angular.Js与Django标签冲突的方案,有需要的朋友们可以参考借鉴,下面来一起学习学习吧。 2016-12-12 浅析Angular 实现一个repeat指令的方法 这篇文章主要介绍了Angular 实现一个repeat指令的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 2019-07-07 AngularJs页面筛选标签小功能 AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTML 页面。本文重点给大家介绍AngularJs页面筛选标签小功能,非常不错,需要的朋友可以参考下 2016-08-08 Angular CLI 安装和使用教程 本篇文章主要介绍了Angular CLI 安装和使用教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-09-09 浅谈angularJS 作用域 这篇文章主要介绍了浅谈angularJS 作用域的相关资料,需要的朋友可以参考下 2015-07-07 详解支持Angular 2的表格控件 本文主要对支持Angular2的表格控件进行详细介绍。具有一定的参考价值,下面跟着小编一起来看下吧 2017-01-01 AngularJS监听ng-repeat渲染完成的两种方法 这篇文章主要介绍了AngularJS监听ng-repeat渲染完成的两种方法,结合实例形式分析了AngularJS基于自定义指令及广播事件实现监听功能的相关操作技巧,需要的朋友可以参考下 2018-01-01 angularjs $http实现form表单提交示例 这篇文章主要介绍了angularjs $http实现form表单提交示例,非常具有实用价值,需要的朋友可以参考下 2017-06-06 最新评论

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初始化静态模板的详细介绍,希望对大家的学习有所帮助。

您可能感兴趣的文章:

  • AngularJS 路由和模板实例及路由地址简化方法(必看)
  • AngularJS入门教程(二):AngularJS模板
  • AngularJS入门教程(一):静态模板
  • Angularjs实现页面模板清除的方法
张贴在3