角JS NG电网默认的全局配置 [英] Angular JS ng Grid Default global configurations

查看:136
本文介绍了角JS NG电网默认的全局配置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用的,其中许多页面上使用NG电网角JS创建一个新的应用程序。我想启用一些全球性配置全部并网发电,这样我可以从一个共同的地方像所有网格改变它的外表和感觉,让排序,列重新大小等。

I am creating a new application using Angular JS where ng grid used at many pages. I want to enable some global configuration for all the grid so that I can change the look and feel from a common place for all grids like, allow sorting, re-size of columns etc.

下面线程解释一下这个,我就AP preciate如果有人能提供一些code例子更多的细节。

Below thread is explaining a bit about this, I would appreciate if someone can provide a more details with some code examples.

https://github.com/angular-ui/ng-grid/问题/ 249

欲实现以这样的方式,所有的全局配置,如果用户没有定义任何结构的,然后它从全局配置拾取

I want to implement all global configuration in such a way that if user is not defining any of the configuration then it picks up from global configuration.

我只想路由配置后定义它们。因此对于datepickerConfig一样的,我该怎么办同为ngGrid。

I want to define them just after the route configuration. so the same for datepickerConfig, how can I do the same for ngGrid.

推荐答案

这样解决的:

总结网格控制器中存放了全球网格配置变量父控制器。

Wrap your grid controllers in a parent controller that holds variables for global grid configuration.

    <div ng-controller="GridGlobals">
        <h1>Grid 1</h1>
        <div ng-controller="MyCtrl1">
            <div class="gridStyle" ng-grid="gridOptions1"></div>
        </div>

        <h1>Grid 2</h1>
        <div ng-controller="MyCtrl2">
            <div class="gridStyle" ng-grid="gridOptions2"></div>
        </div>
    </div>

在设置要控制全球存储在globalGridConfig控制器中变量的选择您的个性化网格选项。由于这一个包裹的gridcontrollers变量有继承到gridcontrollers的范围。

In your individual grid options set the options you want to control globally to the variables stored in the globalGridConfig controller. Since this one wraps the gridcontrollers the variables there are inherited to the scope of the gridcontrollers.

        Gridtest.controller('GridGlobals', function ($scope) {
            $scope.GLobGridShowFilter = true;
            $scope.GLobGridShowFooter = true;
        });

        Gridtest.controller('MyCtrl1', function ($scope) {
            $scope.myData = [
                {name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}
            ];

            $scope.gridOptions1 = {
                data: 'myData',
                showFilter: $scope.GLobGridShowFilter,
                showFooter: $scope.GLobGridShowFooter
            }

        });


        Gridtest.controller('MyCtrl2', function ($scope) {
            $scope.myData = [
                {name: "Tom", age: 50},
                {name: "Sue", age: 43},
                {name: "Jack", age: 27},
                {name: "Willy", age: 29},
                {name: "Josh", age: 34}
            ];


            $scope.gridOptions2 = {
                data: 'myData',
                showFilter: $scope.GLobGridShowFilter,
                showFooter: false
            }
        });

由于NG网的CDN目前无法通过我的电脑访问我不能为你提供一个plunker。一定要通知我,如果这对你的作品。我能够尽快创建一个Plunker演示,因为这一次的作品

Since the ng-grid cdns are currently not reachable via my computer I can't provide you with a plunker. Keep me informed if this works for you. I can create a Plunker Demo as soon as this works again.

更新:

嘿,这再升!这里是许 Plunker

Hey, it's up again! Here is the promised Plunker

请参阅,没有RTFM-BS,只是普通的角难懂的。

See, no rtfm-bs, just plain angular magick.

更新2:

这将再次成为一个漫长的答案: - )

This will be a lengthy answer again:-)

我不认为有一种方式来定义一个全局范围内没有一些技巧。这根本就不是在ngGrid code,你不会找到任何答案,这在文件中也没有在源$ C ​​$ C。

I don't think there is a way to define a global scope without some tricks. It' simply not in the ngGrid code and you won't find any answer to this in the documentation nor in the sourcecode.

但在这里是一种不同的方法:

But here is a different approach:

添加一个新的对象到$ rootScope,这将提供整个应用程序。

Add a new object to the $rootScope, this is will be available throughout your app.

        Gridtest.run(function ($rootScope) {
            $rootScope.gridOptionsGlobal = function () {
                this.data = 'myData';
                this.showFilter = true;
                this.showFooter = true;
            }
        })

然后在你的控制器定义gridOptions是这样的:

Then in your controllers define your gridOptions like this:

        Gridtest.controller('MyCtrl1', function ($scope) {
            $scope.myData = [
                {name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}
            ];

            $scope.gridOptions = new $scope.gridOptionsGlobal();
        });


        Gridtest.controller('MyCtrl2', function ($scope) {
            $scope.myOtherData = [
                {name: "Tom", age: 50},
                {name: "Sue", age: 43},
                {name: "Jack", age: 27},
                {name: "Willy", age: 29},
                {name: "Josh", age: 34}
            ];

            $scope.gridOptions = new $scope.gridOptionsGlobal();
            //overwiting global settings here
            $scope.gridOptions.data = 'myOtherData';
            $scope.gridOptions.showFooter = false;
        });

这样,你不需要包装控制器在你的HTML。

This way you don't need the wrapper controller in your html.

当然,你还可以把全局到控制器,而不是$ rootScope,在网页prevent开销,你没有一个网格。

Of course you can still put the globals to a controller instead of the $rootScope, to prevent overhead on pages where you don't have a grid.

下面是更新后的 Plunker

我不认为你可以得到比这更方便。

I don't think you can get it more convenient than this.

这篇关于角JS NG电网默认的全局配置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆