随笔 - 441  文章 - 4  评论 - 84  阅读 - 109万 

在使用angularjs 时,希望通过动态构建angular模版,再通过angular进行展示。

使用 方法如下:

复制代码
<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('ctrl', ['$scope','$compile',function($scope,$compile){
        $scope.userName='RAY';
        $scope.test = function test(){
            console.log('你好:' +$scope.userName);
        }
         
        //通过$compile动态编译html
        var html="<button ng-click='test()'>{{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>
复制代码

 

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

这种代码就是angular模版,通过angularjs的编译器进行编译,就能够访问到angular scope中的对象数据。

posted on   自由港  阅读(2197)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
点击右上角即可分享
微信分享提示