AngularJS初始化静态模板详解

前端技术 2023/09/08 JavaScript

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

本文地址：https://www.stayed.cn/item/22389

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案