Implement dynamic compilation of methods added to dom through AngularJS-JS Tutorial-php.cn

Implement dynamic compilation of methods added to dom through AngularJS

高洛峰

Release： 2017-03-25 16:12:11

Original

1786 people have browsed it

The example in this article describes how AngularJS implements dynamic compilation and adds it to the dom. Share it with everyone for your reference, the details are as follows:

When using angularjs, I hope to dynamically build the angular template and then display it through angular.

The usage method is as follows:

<html ng-app="app">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="assets/angular.min.js"></script>
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/handlebars.min.js"></script>
  <script src="assets/Handlebars.helper.js"></script>
  <script >
  var app=angular.module("app",[]);
  app.controller(&#39;ctrl&#39;, [&#39;$scope&#39;,&#39;$compile&#39;,function($scope,$compile){
    $scope.userName=&#39;RAY&#39;;
    $scope.test = function test(){
      console.log(&#39;你好:&#39; +$scope.userName);
    }
    //通过$compile动态编译html
    var html="<button ng-click=&#39;test()&#39;>{{userName}}</button>";
    var template = angular.element(html);
    var mobileDialogElement = $compile(template)($scope);
    angular.element(document.body).append(mobileDialogElement);
  }]);
  </script>
</head>
<body ng-controller="ctrl">
</body>
</html>

Copy after login

var html="<button ng-click=&#39;test()&#39;>{{userName}}</button>";

Copy after login

This kind of code is the angular template. By compiling it through the angularjs compiler, you can access the object data in the angular scope.

The above is the content of AngularJS’s method of dynamically compiling and adding to dom. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

AngularJS dynamically generates div IDs

AngularJs dynamically loads modules and dependencies

AngularJS implements methods of binding events to dynamically generated elements