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就不会存在问题。

    阿里云-虚拟数字人
    阿里云-虚拟数字人

    阿里云-虚拟数字人是什么? ...

    下载

    不过知道问题的原因后就好解决问题了,把返回的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

    相关专题

    更多
    php源码安装教程大全
    php源码安装教程大全

    本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

    129

    2025.12.31

    php网站源码教程大全
    php网站源码教程大全

    本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

    77

    2025.12.31

    视频文件格式
    视频文件格式

    本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

    81

    2025.12.31

    不受国内限制的浏览器大全
    不受国内限制的浏览器大全

    想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

    60

    2025.12.31

    出现404解决方法大全
    出现404解决方法大全

    本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

    444

    2025.12.31

    html5怎么播放视频
    html5怎么播放视频

    想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

    15

    2025.12.31

    关闭win10系统自动更新教程大全
    关闭win10系统自动更新教程大全

    本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

    12

    2025.12.31

    阻止电脑自动安装软件教程
    阻止电脑自动安装软件教程

    本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

    5

    2025.12.31

    html5怎么使用
    html5怎么使用

    想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

    2

    2025.12.31

    热门下载

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

    精品课程

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

    共24课时 | 2.2万人学习

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

    共15课时 | 1.5万人学习

    AngularJS 中文手册
    AngularJS 中文手册

    共0课时 | 0人学习

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

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