Jquery使用ajax以及angularjs 动态模板加载并进行渲染

1. 源码

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="director-master/build/director.js"></script>
        <script type="text/javascript" src="angular/angular.js"></script>
        <script>
        
           ///  定义模块
            var login=angular.module("mylogin",[]);
                   login.factory("dalongapp",function(){
                         return {
                             appname:"dalong demo",
                             appurl:"http://www.baidu.com"
                         };
                   });
           /// 此处注入模块
                var myapp=angular.module("YYIMApp",["mylogin"]);
                myapp.run(function($rootScope,$templateCache){
                    alert("app is running")
                    $rootScope.dalongappdemo={
                        dalonginfo:"dalong demo",
                        daongage:33
                    };
                    
                    $templateCache.put("applogin.html",'<div><h1>cache file info:</h1>{{username.appurl}}</div>')
                });
        /// 此处暴露共享的方法
                myapp.controller("IMctrl",function($scope,dalongapp,$rootScope,$compile,$templateCache){
                    $scope.username={
                        appurl:"www.baidu.com"
                    };
                    $scope.onclickdemo=function(){
                        
                        console.log(dalongapp);
                        console.log($templateCache);
                        var cachetemp=$templateCache.get("applogin.html");
                        console.log(cachetemp);
                        alert($scope.username.appurl+dalongapp.appname+$rootScope.dalongappdemo.daongage);
                    };
                    $rootScope.compileservice=function(ele,scope){
                     return $compile(ele)(scope);
                    }
                    
                    
                    $scope.getcache=function(key){
                        
                        
                        return $templateCache.get(key);
                        
                    }
                    
                    $scope.cachelogindemo=function(){
                        
                        
                        
                        
                    }
                    $rootScope.safeApply=function(scope){
                        scope.$apply();
                        
                    }
                });
        </script>
       
       
       
       
       
       
        <script>
          /// 此处手工启动应用
            angular.element("#dalongdemo").ready(function(){
                
                angular.bootstrap(document.getElementById("dalongdemo"),["YYIMApp"]);
                               
               })
        </script>
        <script>
            function mess()
            {
                var content=$("#content");
                var content2=$("#content2");
                content.empty();
                content2.empty();
                  first();
                  second();
            }
            function  first()
            {
                $.get("myapp.htm",function(data){
                    var html=data;
                    var content=$("#content");
                    var content2=$("#content2");
                    var el=$(data);
                    console.info("appappend el");
                    //console.log(el);
                    //console.log(html);
                    //content.append(html);
                    
                    console.log(angular);
                    var appdalong=angular.element("#content");
                    console.log(appdalong) 
                    scope= angular.element(document.getElementById("dalongdemo")).scope();
                    console.info("scope");
                    scope2= angular.element(document.getElementById("dalongdemo2")).scope();
                    
                 //   console.log(scope);
                   //  console.log(scope2);
                    /// 动态编译模板并进行数据加载
                    var appinfo= scope.$parent.compileservice(el,scope)
                    content.append(appinfo);
                    scope.$parent.safeApply(scope);
                   // console.log(appinfo);
                   // console.log(angular.element(document.getElementById("dalongdemo")))
//                    
                   //angular.element("#YYIMApp").ready(function(){
//                        
//                    angular.bootstrap(document.getElementById("YYIMApp"),["YYIMApp"]);
//                   
//                   })
    
                });
                
            }
            function  second()
            {
                $.get("myapp1.htm",function(data){
                    var html=data;
                    var content=$("#content");
                    var content2=$("#content2");
                        var cachetemp=scope.getcache("applogin.html");
                        console.info("app demo");
                        console.log(cachetemp);
                        console.log(scope);
                        var compile=scope.compileservice($(cachetemp),scope.$new());
                        console.log(compile);
                        content2.append(compile);
                        scope.$parent.safeApply(scope);
//                    angular.element("#YYIMApp2").ready(function(){
//                        
//                    angular.bootstrap(document.getElementById("YYIMApp2"),["YYIMApp"]);
//                   
//                   })
                });
                
            }
            function myappdemo()
            {
                var content=$("#content");
                var content2=$("#content2");
                content.empty();
                content2.empty();
                content.append('<p>dalong demo</p>')
                
            }
            
            
             var routes = {
                 
                 
             '/message': mess,
             
             '/appdemo':myappdemo
           };
       
      
           var router = Router(routes);
           router.init();
        </script>

    </head>

    <body>
        <h1>dalong demo</h1>

        <a href="#message">message</a>

        <br>
        <a href="#appdemo">myappdemo</a>
        <h1>first</h1>

        <div id="dalongdemo" ng-controller="IMctrl">

            <h1>{{dalongappdemo.dalonginfo}}</h1>

            <div id="content">

            </div>
            <h1>second</h1>
            <div id="content2">

            </div>

        </div>

    </body>

</html>
复制代码

 

2. ajax 请求的模板片段文件：

<div    id="YYIMApp">    
    <div   ng-controller="IMctrl">
        <h1  ng-bind="username.appurl">{{username.appurl}}</h1>
        
        <button  ng-click="onclickdemo()">clickdemo</button>
    </div>
</div>

 

原理解析：

主要是通过JavaScript 与angularjs 互调用并使用$compile 服务进行数据的动态渲染并添加DOM元素

价值：

可以方便的进行第三方框架与angularjs 的集成，如果使用ng-app 等指令可能会便捷性比较小。

 

posted on   荣锋亮  阅读(1998)  评论(0)  编辑  收藏  举报

编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）

导航

< 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
点击右上角即可分享
微信分享提示