使用 Angular 管理 Web 应用程序范围的覆盖和进度小部件的最佳方法答案

【问题标题】：Best way to manage a Web App-wide overlay and progress widget using Angular使用 Angular 管理 Web 应用程序范围的覆盖和进度小部件的最佳方法
【发布时间】：2014-06-23 18:25:17
【问题描述】：

我正在尝试将 Web 应用程序从纯 jQuery 移植到 AngularJS，我遇到了一个小部件，该小部件用于显示整个 Web 应用程序过程的进度。该小部件只是一个弹出窗口<div>，后面有一个部分透明的覆盖层，用于“暗淡”背景网页。现在整个网络都在使用这个效果，我想把这个小部件转换成某种 Angular 指令或某种类型的服务。

我想知道这种功能是否最好使用指令或服务来实现？

现在，小部件正在使用此模块模式对象从 DOM 中插入和删除。

WEBSITE.utils.overlay = function ($) {
    var _cover;
    $(document).ready(function () {
        _cover = $(document.createElement('div')).attr('id', 'cover').prependTo($('body'));
    });
    return {
        show: function () {
            $(_cover).addClass('show');
            $('html,body').bind('mousewheel DOMMouseScroll', function (event) {
                event.preventDefault();
            });
            return _cover;
        },
        destroy: function () {
            $('html,body').unbind('mousewheel DOMMouseScroll');
            $(_cover).removeClass('show');
        }
    }
} (jQuery);

如您所见，小部件相当简单，我想让它可用，以便小部件中的 HTML 也可以轻松修改。我想到的最简单的方法可能是创建一个全局指令，例如：

<progressbar>Here is some text that I want displayed</progressbar>

那么创建指令并仅修改控制器中的文本是获得此功能的最佳方式吗？还是我应该使用服务之类的东西来获取它？

【问题讨论】：

指令绝对是处理 DOM 操作的方法 - 你很可能还希望它可以从控制器调用（进行数据调用 = 开始进度，完成 = 结束进度） - 我使用scope 方法说指令，使其可从控制器调用
好的，谢谢，我会试试看，至少能得到什么
您可能还想查看提供程序 - 这样您就可以将其注入需要它的控制器中，然后像这样调用它
我不确定这是不是最好的方法，但我通常同时使用指令和服务。我调用服务的方法之一，传递必要的参数，它使用指令来显示小部件。（它比听起来更复杂，特别是因为您想与小部件交互并更改它的状态，但一旦完成，它是一个非常有用且高度可重用的功能。）

标签： angularjs

【解决方案1】：

您描述的“应用程序范围”部分指向使用角度服务实现（至少部分）您的小部件。小部件本身的 HTML 和行为可能最好作为指令来实现。

可能是这样的吗？

小部件组件：

angular.module('myApp',[])
// the components of the widget
//model
.service('progressWidget',function($document){
    var _loadingMessage = "";
    var _visible = false;
    return {
        show: function(loadingMessage){
            _loadingMessage = loadingMessage;
            _visible = true;
        },
        hide: function(){
            _visible = false;
        },
        isVisible: function(){
            return _visible;
        },
        getLoadingMessage: function(){
            return _loadingMessage;
        }
    };
})
//view
.directive('progressWidget',function(){
    return {
        restrict:'A',
        scope: {
            loadingMessage: '=progressWidget'
        },
        link: function(scope){
            console.log(scope);
        },
        template: ['<div class="panel panel-default">'
                  ,'    <div class="panel-heading">'
                  ,'        <h3 class="panel-title">Loading...</h3>'
                  ,'    </div>'
                  ,'    <div class="panel-body">'
                  ,'        <div class="row">'
                  ,'        <p class="lead text-center">{{loadingMessage}}</p>'
                  ,'            <div class="col-sm-6 col-sm-offset-3">'
                  ,'                <div class="progress progress-striped active">'
                  ,'                    <div class="progress-bar" style="width: 100%"></div>'
                  ,'                </div>'
                  ,'            </div>'
                  ,'        </div>'
                  ,'            <p class="text-center">Please wait</p>'
                  ,'    </div>'
                  ,'</div>'
                  ].join('')

    };
})
//controller
.controller('widgetHelperController',function($scope,progressWidget){
    $scope.widget = progressWidget;    
})

消费者控制器：

.controller('myController',function($scope,progressWidget){
    $scope.clear = progressWidget.hide;
    $scope.validateTransaction = progressWidget.show.bind(null,
        'Your transaction is being validated');
    $scope.runBackgroundCheck = progressWidget.show.bind(null,
        'Running the background check');
})
.controller('myOtherController',function($scope,progressWidget){
    $scope.clear = progressWidget.hide;
    $scope.orderPizza = progressWidget.show.bind(null,
        'Your pizza order is being processed');
    $scope.issueWarrant = progressWidget.show.bind(null,
        'Your warrant is being issued');
})

还有一个小存根放在你的应用程序模板中：

<div ng-controller="widgetHelperController">
    <div ng-if="widget.isVisible()" progress-widget="widget.getLoadingMessage()"></div>    
</div>

在此处查看实际操作：http://jsfiddle.net/wilsonjonash/F4YN7/

【讨论】：