AngularJS $compile动态生成html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
angular.module('app')
    .directive('compile', function ($compile) {
        return function (scope, element, attrs) {
            scope.$watch(
              function (scope) {
                   
                  return scope.$eval(attrs.compile);
              },
              function (value) {
                  element.html(value);
                  $compile(element.contents())(scope);
              }
            );
        };
    });

  

1
2
3
4
5
6
<div ng-app="app" ng-controller="SampleCtrl" class="container">
     <div ng-repeat="item in items">
         {{item.name}}<br />
         <div compile="item.tempatle"></div>         
     </div>   
 </div>

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
       angular
           .module('app')
           .controller('SampleCtrl', function ($scope, $filter) {
 
               $scope.open = function () {
                   alert("ddd");
               }
               $scope.items = [
                   { "name": "zhangsan", tempatle: '<i class="searchicon fa fa-search"   ng-click="open()" style="color:#5db2ff;cursor:pointer;">点击</i>' },
                   { "name": "lisi", tempatle: '<i class="searchicon fa fa-search"   ng-click="open()" style="color:#5db2ff;cursor:pointer;">点击</i>' },
                   { "name": "wangwu", tempatle: '<i class="searchicon fa fa-search"   ng-click="open()" style="color:#5db2ff;cursor:pointer;">点击</i>' }]
 
           });
   </script>

  

posted on   落叶子  阅读(9119)  评论(0编辑  收藏  举报

编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示