AngularJS:将相同的组件添加到多个模块

时间:2018-10-10 08:29:07

标签: javascript angularjs

我正在使用https://coreui.io/demo/#main.html核心ui引导模板。

我有几个模块+控制器。例如:

mypartapp1.js:

 angular
    .module("app", [])
    .controller('ComptesController', ComptesController)
   // etc ...

mypartapp2.js:

    angular
    .module("app", [])
   .controller('EnseignesController', EnseignesController)
    // etc ...

我已经建立了一个与每个控制器兼容的非常大的组件(可重复使用),我是否必须在每个文件(mypartapp1.js,partapp2.js ...)中重写它,因为我希望这样做独一无二,不知道该怎么做。

我怎么能从同一路径上调用它?

这是我提供信息的主要部分:

.component('filtresDyn', {
    templateUrl:'_crm/views/include/filtres_dyn.html',
    controller : [ '$http','$scope','$rootScope','toastr',function control($http,$scope,$rootScope,toastr){


         const table = 'crm_comptes';


         this.filtres = [];


        $http.post("./_crm/backend/backend.php?action=GetColumnsNames", {'table':table}).then(function(response) {
            this.table = response.data;
        }.bind(this))

         this.operateurs = [
            {'nom':'LIKE','traduction':'Contient'},
            {'nom':'NOT LIKE','traduction':'Ne Contient Pas'},
            {'nom':'=','traduction':'Est'},
            {'nom':'!=','traduction':'N\'est pas'},
            {'nom':'NULL','traduction':'Est vierge'},
            {'nom':'NOT NULL','traduction':'N\'est pas vierge'},
            {'nom':'>','traduction':'Est supérieur à'},
            {'nom':'<','traduction':'N\'est pas supérieur à '}
        ];


        this.Get_filtered_data = function(){

            $scope.$parent.Get_filtered_data(this.filtres); 
        }



        this.addElement = function(){
            this.filtres.push({'champs':'','operateur':'','critere':'','table':table});

        }

        this.spliceElement = function(){
            this.filtres.splice(-1,1);

        }

        this.verify_data_type = function(champs,parent){

            switch(champs.data_type) {
                case 'integer':
                    parent.showInteger = true;
                    parent.showDate = false;
                    parent.showText = false;
                    break;
                case 'date':
                    parent.showInteger = false;
                    parent.showDate = true;
                    parent.showText = false;
                    break;
                case 'character varying':
                    parent.showInteger = false;
                    parent.showDate = false;
                    parent.showText = true;
                    break;
                default:
                    parent.showInteger = false;
                    parent.showDate = false;
                    parent.showText = true;
            } 



        }



        this.nomF = ''; 

        this.ChargeFiltresPersos = function(){
                $http.post("./_crm/backend/backend.php?action=GetFiltresDynamique",{'id'    : $rootScope.user.id})
                    .then(function(response) {

                        angular.forEach(response.data,function(value,key){
                                angular.forEach(value.filtres,function(value,key){
                                    if(value.showDate == true){
                                         value.critere = new Date(value.critere);
                                    }
                                 });
                        });


                        this.listeFiltresUser = response.data;

                }.bind(this))
        }

        this.sauverFiltre = function(){

                $http.post("./_crm/backend/backend.php?action=SetFiltresDynamique",
                    {
                    'id_liseo_utilisateurs' :   $rootScope.user.id_liseo_utilisateurs,
                    'filtres'               :   this.filtres,
                    'nom_filtre'            :   this.nomF
                    })
                    .then(function(response) {
                         toastr.success('Bien Joué !', 'Votre filtre a bien été enregistré.');

                        $http.post("./_crm/backend/backend.php?action=GetFiltresDynamique",{'id'    : $rootScope.user.id})
                            .then(function(response) {
                                this.listeFiltresUser = response.data;
                        }.bind(this));

                    }.bind(this))

        }   

            this.chargerMonFiltrePersonnel = function(array){

                    this.filtres = angular.copy(array.filtres);

                    this.Get_filtered_data(); 

            }




        this.filtres.push({'champs':'','operateur':'','critere':'','table':table});

        this.ChargeFiltresPersos();

    }]
  })

我是否必须在每个文件模块中重写它?它看起来不会很好,而且应该是独一无二的

1 个答案:

答案 0 :(得分:0)

在创建组件时,要依赖注入其他模块以利用多个模块中的组件。

angular.module("app1", []);

angular.module("app2", ["app1"])
.component("myComponent",{}); //component can used in multiple modules 

检查链接,我添加了共享组件的通用结构: https://next.plnkr.co/edit/MlktyFgTYCgHXBo9?preview