Question

我正在尝试将Web应用程序从纯jQuery移植到AngularJS，然后我运行了一个用于在整个Web应用程序进程中显示进度的小部件。这个小部件只是一个弹出窗口<div>，背面有一个部分透明的叠加层，用于＆＃34;暗淡＆＃34;背景网页。此效果现在在整个网络上使用，我想将此窗口小部件转换为某种类型的Angular指令或服务。

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

现在，正在使用此Module Pattern对象插入和删除小部件。

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>

那么创建一个指令只是修改控制器中的文本是获得此功能的最佳方法吗？或者我应该使用类似服务的东西来获取它？

Answer 1

＆＃34;应用范围＆＃34;您的描述的一部分指向使用角度服务实现（至少部分）您的窗口小部件。窗口小部件本身的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/

使用Angular管理Web App范围覆盖和进度小部件的最佳方法

1 个答案: