脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS初始化静态模板

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

您可能感兴趣的文章:

相关文章

  • AngularJs ng-repeat 嵌套如何获取外层$index

    AngularJs ng-repeat 嵌套如何获取外层$index

    这篇文章主要介绍了AngularJs ng-repeat 嵌套如何获取外层$index的相关资料,需要的朋友可以参考下
    2016-09-09
  • AngularJS实现页面定时刷新

    AngularJS实现页面定时刷新

    本篇文章主要介绍了AngularJS实现页面定时刷新，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • Angular父子组件通过服务传参的示例方法

    Angular父子组件通过服务传参的示例方法

    这篇文章主要介绍了Angular父子组件通过服务传参的示例方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • Angularjs为ng-click事件传递参数

    Angularjs为ng-click事件传递参数

    这篇文章主要介绍了Angularjs为ng-click事件传递参数的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-06-06
  • AngularJS的依赖注入实例分析(使用module和injector)

    AngularJS的依赖注入实例分析(使用module和injector)

    这篇文章主要介绍了AngularJS的依赖注入,结合实例形式分析了依赖注入的原理及使用module和injector实现依赖注入的步骤与操作技巧,需要的朋友可以参考下
    2017-01-01
  • 详解Angular2响应式表单

    详解Angular2响应式表单

    这篇文章主要介绍了详解Angular2响应式表单，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • angular多语言配置详解

    angular多语言配置详解

    这篇文章主要介绍了angular多语言配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • AngularJs bootstrap搭载前台框架——基础页面

    AngularJs bootstrap搭载前台框架——基础页面

    本文主要介绍AngularJs bootstrap搭载前台框架基础页面的建设，这里整理饿了相关资料及实现实例代码，有兴趣的小伙伴可以参考下
    2016-09-09
  • AngularJS ng-style中使用filter

    AngularJS ng-style中使用filter

    这篇文章主要介绍了AngularJS ng-style中使用filter的相关资料,需要的朋友可以参考下
    2016-09-09
  • angular6 填坑之sdk的方法

    angular6 填坑之sdk的方法

    这篇文章主要介绍了angular6 填坑之sdk的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12

最新评论