• ANGULARJS 动态编译添加到dom中


    在使用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中的对象数据。

  • 相关阅读:
    文件下载断点续传插件webupload插件
    cocos2dx 2.x 粒子渲染时有黑色粒BUG
    VOIP NAT穿越之SIP信令穿越
    hdu 5086 Revenge of Segment Tree(BestCoder Round #16)
    [并发]线程池技术小白
    调用 COM 对象
    switch-case 执行顺序
    HDELETE
    python and java
    部分查询练习题及答案
  • 原文地址:https://www.cnblogs.com/yg_zhang/p/4799627.html
Copyright © 2020-2023  润新知