Of Stack

AngularJS initializes static template detail

  • 2020-12-07 03:57:48
  • OfStack

AngularJS can automatically initialize the module through ES2en-ES3en, or manually start the application through ES4en.bootstrap (document, [module]). No matter which method is used, after the application is started, dom elements added to the dom tree dynamically cannot execute angular instruction, that is, ng-ES12en, ES13en-ES14en can't dynamically add dom elements to bind data and events, what should I do?

Dynamically add dom elements of the scene is very common, such as clicking on a page to modify the user information button, send ajax request to query the user data, and then through the template engine will be written in the static page template to compile into HTML string, finally append HTML string to the page displayed, 1 case, we would like to do this: 


<!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(){
      // Suppose this is ajax Data returned 
      scope.username = 'wangmeijian';
      scope.password = '000000';
      $(".contani").html(myTmpl.innerHTML);
    }
  }])
</script>
<button ng-click="edit()"> Modify the data </button>
<div class="contani"></div>
<script type="text/html" id="myTmpl">
  <form>
     User name: <input type="text" ng-model="username" />
     Password: <input type="text" ng-model="password" />
  </form>
</script>
</body>
</html>

Click the Modify data button, and the newly inserted dom element does not bind the data returned by ajax. This is because angular has been initialized before clicking the button. The solution, of course, is not to initialize HTML of the static template once more, but to use $compile alone to compile HTML of the static template, and then insert it into the dom tree 


<!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(){
      // Suppose this is ajax Data returned 
      scope.username = 'wangmeijian';
      scope.password = '000000';
      //$(".contani").html(myTmpl.innerHTML);
      $(".contani").append( $compile(myTmpl.innerHTML)(scope) )
    }
  }])
</script>
<button ng-click="edit()"> Modify the data </button>
<div class="contani"></div>
<script type="text/html" id="myTmpl">
  <form>
     User name: <input type="text" ng-model="username" ng-change="valchange()" />
     Password: <input type="text" ng-model="password" ng-change="valchange()" />
  </form>
</script>
</body>
</html>

This is the detailed introduction to AngularJS initialization static templates, and I hope it will help you with your study.

Related articles: