Question

我已经创建了一个指令和服务，它们结合起来在我们的应用程序中创建一个弹出模式。我可以调用设置scope变量的弹出式服务，并使modal指令变为可见。问题是我无法弄清楚最佳位置是将弹出模式的各个实例所需的逻辑放在哪里。每个模态都有不同的视图，因此控制模态的逻辑也不同。

有没有办法告诉指令动态使用特定的控制器，这样我可以控制代码运行，而不同的模态对用户可见？

这是我的叠加服务，用于设置模态

.factory("Overlay", ["$rootScope", "$window", '$q', function ($rootScope, $window, $q) {
    var overlay = {};

    var el;
    var gears;
    var scope = {};

    var isActive = false;

    function _displayBackground() {
        $rootScope.overlayVisible = true;
    }

    function _hideBackground() {
        $rootScope.overlayVisible = false;
    }

    overlay.getScope = function(){
        return scope;
    }

    overlay.Gears = {
        show: function(msg, feedback){
            _displayBackground();

            var def1 = $q.deferred();
            var def2 = $q.deferred();

            $timeout(function(){
                def1.resolve({
                   result: {
                       Complete: true,
                       Success: true
                   }
                });
            }, Math.random() * 5000);

            $timeout(function(){
                def2.resolve({
                    result: {
                        Complete: true,
                        Success: false
                    }
                })
            }, Math.random() * 5000);

            feedback = [
                {
                    Label: 'Item 1',
                    Complete: false,
                    Promise: def1.promise
                }, {
                    Label: 'Item 2',
                    Complete: false,
                    Promise: def2.promise
                }
            ];

            scope.feedback = feedback;
            scope.message = msg;
            scope.url = '/partials/Common/gears.html';

            $rootScope.modalVisible = true;

        },
        hide: function(){
            _hideBackground();

            $rootScope.modalVisible = false;
        }
    };

    overlay.Alert = {
        show: function (title, content, hint, posCallback, btnText, negCallback) {
            _displayBackground();

            // el = angular.element(
        }
    }

    return overlay;

}])

这是我的模态指令

app.directive('skModal', function($window, Overlay){
   return {
       restrict:'EA',
       template: '<div ng-include="modal.url" onload="setPosition()"></div>',
       link: function(scope, elem, attrs){
           var top, left;

           scope.modal = {};

           scope.setPosition = function(){
               top = ($window.innerHeight - elem.outerHeight()) / 2;
               left = ($window.innerWidth - elem.outerWidth()) / 2;

               elem.css({ 'top': top, 'left': left });

           }

           scope.$watch(attrs.skModal, function(newVal){
               if(newVal) {
                   angular.extend(scope.modal, Overlay.getScope());
               }else{
                   elem.css({ 'top': -9999, 'left': -9999 });
                   scope.modal.url = '';
               }
           });

       }
   };
});

我基本上使用getScope从Overlay服务链接我想要使用的范围，但我无法处理我想在此特定模式中使用的Promise以显示反馈1次API调用。

在AngularJS中的同一指令上使用不同的控制器

0 个答案: