0

0

浅谈angularjs module返回对象的坑

高洛峰

高洛峰

发布时间:2016-12-09 14:07:35

|

1445人浏览过

|

来源于php中文网

原创

通过将module中不同的部件拆分到不同的js文件中,在组装的时候发现module存在一个奇怪的问题,不知道是不是angularjs的bug。至今没有找到解释。

问题是这样的,按照理解,angular.module('app.main', []);这样一句话相当于从app.main命名空间返回出一个app对象。那么,不论在任何js文件中,我通过该方法获得的app变量所储存的指针都应该指向唯一的一个堆内存,而这个内存中存储的就是这个app对象。这种操作在module的js文件,和controller的js文件,service的js文件中确实是没有问题的,是同一个对象。但是再加入directive的时候,这个app对象居然没有被module注册。为什么没有被注册,结论自然是返回的这个app变量所指向的对象不再是我们注册的那个。

也就是如果像下面这样写就会有问题:

app.js

(function(angular){
    angular.module('app.main',
        ['app.login']
    );
})(window.angular);

   

menuController.js

(function(angular){
  angular.module('app.main', []);
  .controller('MenuController',function($scope,menuService,userService){
    var loginname=Cookies.getCookieValue("loginname");
    var token=Cookies.getCookieValue("token");
        Cookies.delCookieValue("token");
        Cookies.delCookieValue("loginname");
    alert(userService.getToken());
    $scope.menu=[];
     
    menuService.initMenu(loginname,token,function(menu){
        $scope.menu=menu;
        $scope.$broadcast("menuLoaded");
    });
     
        $scope.displaySwitch=function(index){
        if($scope.menu[index].isShow)
            $scope.menu[index].isShow=false;
        else
            $scope.menu[index].isShow=true;
    };
     
    });
   
})(window.angular);

   

menu.js

(function(angular){
    if(!app)
    app={};
  if(!app.main)
    angular.module('app.main', []);
    .directive('menu', function($compile) {
      return {
        restrict: 'A',
        replace: false,
        priority: 999,
        link: function ($scope, $elem, attrs) {
 
            $scope.$on("menuLoaded", function (event, args) {
             
                var tableRow = "";
                 
                angular.forEach($scope.menu, function (item) {
                    var sub='';
                    var subLi='';
 
                    if(item.main){
                        sub=[
                           '',
                           '',
                       item.name,
                         ''
                          ].join('');
                    }else if(item.history){
                        sub=[
                           '',
                             '',
                       item.name,
                         ''
                          ].join('');
                    }else if(item.sub){
                        sub=[
                           '',
                           '',
                       item.name,
                       '',
                         ''
                          ].join('');
                        subLi='';
                    }else{
                        sub=[
                           '',
                           '',
                       item.name,
                         ''
                          ].join('');
                    }
                    tableRow = tableRow+['
  • ', sub, '
  • ', subLi ].join(''); }); $elem[0].innerHTML = tableRow; $compile($elem.contents())($scope); }); } }; }); })(window.angular);

       

    如果同时加载这三个js就会存在之前说的问题,分别加载app.js和menuController.js或者app.js和menu.js就不会存在问题。

    文心大模型
    文心大模型

    百度飞桨-文心大模型 ERNIE 3.0 文本理解与创作

    下载

    不过知道问题的原因后就好解决问题了,把返回的app对象的应用给到全局变量,每个js判断是不是存在这个全局变量,如果存在,则用该变量。否则再通过module进行获得。

    app.js

    (function(angular){
        app={};
        app.main=angular.module('app.main',
            ['app.login']
        );
    })(window.angular);

       

    menuController.js

    (function(angular){
         
        if(!app)
        app={};
      if(!app.main)
            app.main=angular.module('app.main', []);
      app.main.controller('MenuController',function($scope,menuService,userService){
        var loginname=Cookies.getCookieValue("loginname");
        var token=Cookies.getCookieValue("token");
            Cookies.delCookieValue("token");
            Cookies.delCookieValue("loginname");
        alert(userService.getToken());
        $scope.menu=[];
         
        menuService.initMenu(loginname,token,function(menu){
            $scope.menu=menu;
            $scope.$broadcast("menuLoaded");
        });
         
            $scope.displaySwitch=function(index){
            if($scope.menu[index].isShow)
                $scope.menu[index].isShow=false;
            else
                $scope.menu[index].isShow=true;
        };
         
        });
       
    })(window.angular);

       

    menu.js

    (function(angular){
        if(!app)
        app={};
      if(!app.main)
            app.main=angular.module('app.main', []);
      app.main.directive('menu', function($compile) {
          return {
            restrict: 'A',
            replace: false,
            priority: 999,
             
            link: function ($scope, $elem, attrs) {
     
                $scope.$on("menuLoaded", function (event, args) {
                 
                    var tableRow = "";
                     
                    angular.forEach($scope.menu, function (item) {
                        var sub='';
                        var subLi='';
     
                        if(item.main){
                            sub=[
                               '',
                               '',
                           item.name,
                             ''
                              ].join('');
                        }else if(item.history){
                            sub=[
                               '',
                                 '',
                           item.name,
                             ''
                              ].join('');
                        }else if(item.sub){
                            sub=[
                               '',
                               '',
                           item.name,
                           '',
                             ''
                              ].join('');
                            subLi='';
                        }else{
                            sub=[
                               '',
                               '',
                           item.name,
                             ''
                              ].join('');
                        }
                        tableRow = tableRow+['
  • ', sub, '
  • ', subLi ].join(''); }); $elem[0].innerHTML = tableRow; $compile($elem.contents())($scope); }); } }; }); })(window.angular);

       

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    go语言 注释编码
    go语言 注释编码

    本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

    32

    2026.01.31

    go语言 math包
    go语言 math包

    本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

    23

    2026.01.31

    go语言输入函数
    go语言输入函数

    本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

    16

    2026.01.31

    golang 循环遍历
    golang 循环遍历

    本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

    5

    2026.01.31

    Golang人工智能合集
    Golang人工智能合集

    本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

    6

    2026.01.31

    2026赚钱平台入口大全
    2026赚钱平台入口大全

    2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

    268

    2026.01.31

    高干文在线阅读网站大全
    高干文在线阅读网站大全

    汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

    195

    2026.01.31

    无需付费的漫画app大全
    无需付费的漫画app大全

    想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

    170

    2026.01.31

    漫画免费在线观看地址大全
    漫画免费在线观看地址大全

    想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

    85

    2026.01.31

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    AngularJS教程
    AngularJS教程

    共24课时 | 3.2万人学习

    走进 ES6 新标准语法
    走进 ES6 新标准语法

    共15课时 | 1.6万人学习

    AngularJS 中文手册
    AngularJS 中文手册

    共0课时 | 0人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号