zoukankan      html  css  js  c++  java
  • 非正规方法处理AngulurJS模块管理问题

    1.起因

    自己一直做winform,有幸从某个大神手里接了一个node.js,express,angulurJS等集众多开源框架的一个项目,赶鸭子上架,于是一边学习,一边用自己以往的思中去整理,重构代码; 

    2.问题

    在某几个环境下,需要用BootStrap的模态框,咱是学win的么。。 自然而然的想到将boosStrp的模态框整成一个通用的东西,四处调用 。。。 

    于是用patial引用对话框文件,对话框本身用anglurJS进行了服务器相关的通讯 。

    后来发现,当只用一个的时候是好用的,如果多次引用 (调用不同的数据)那么只有一个好使。。 

    3.分析

    查了一些资料才明白, angular.bootstrap 这个调用在页面上只能执行一次,多执行就不好用了,而我之前将所有的angular.module都写成了单独的JS文件中,每一个JS文件最后都调用了 angular.bootstrap 所以,自然而然的会挂掉; 

    4.期待

    于是,想有一种解决机制,让我可以随意的partial各种文件到页面中, 并且js文件之间不会重复引用 ,angulurJS也能完美执行; 

    5.解决

    亲们——虽然这个方式有点恶心,但是绝对直接有效; 

    思路就是把所有的AngulurJS模块动态维护在一个全局数组,然后进行动态的加载

    不说了,贴代码

    在框架页(layout ...)head处引用 angulurinit.js文件,代码如下:

    Array.prototype.indexOf = function (val) {  
       for( var i = 0; i < this.length; i++) {
            if(this[i] == val) return i;
                       }
        return - 1;
               };
    var jsModules = new Array();
    function Confirm(val){
        if (jsModules.indexOf(val) > -1)
            return;
        else
            jsModules.push(val);
    
    };

    将每一个anglur.js模块内的

    angular.bootstrap(document, [modulename]);

    替换成

      Confirm(modulename);

    在layout(布局页?我也不知道叫啥,反正是那个公共的框架页)尾部加入angulur.js文件,代码如下:

    (function () {
        var app = angular.module('app', jsModules);
        angular.bootstrap(document, ['app']);
    })();

    嘿嘿~~ 我恶心了。。。 恶心到您了没?

    本人WEB 菜鸟小白一个,欢迎大神们留言解决方式;

  • 相关阅读:
    解决IE下a标签点击有虚线边框的问题
    解决IE8下opacity属性失效问题
    用Vue.js开发微信小程序:开源框架mpvue解析
    使用pie.htc时Border-radius的兼容
    解决IE8下CSS3选择器 :nth-child() 不兼容的问题
    jQuery兼容浏览器IE8方法
    css3兼容IE8的方案 各个ie的hack
    JavaScript之旅(DOM)
    JavaScript之旅(三)
    JavaScript之旅(二)
  • 原文地址:https://www.cnblogs.com/geyunfei/p/4464872.html
Copyright © 2011-2022 走看看