Question

我的AngularJS网络应用程序需要（正如您可能猜到的）在某个时候显示模态弹出窗口。在学习AngularJS之前，我曾经使用命名空间集中我的代码，并且我将所有UI内容放在一个合适的命名空间中，例如： MyProj.UI.Dialogs.Modal.show（）（只是一个例子）

现在我'，试图在AngularJS中应用相同的逻辑。所以，我创建了一个指令：

app.directive('modal', function ($compile) {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: '/partials/site/modal.html'
    }
});

使用以下模板：

<div>
    <h2>{{title}}</h2>
    <p>{{text}}</p>
</div>

所以我可以在我的html中使用模态标记。

现在，要控制模式行为，我想使用服务，例如：

angular.module('ui', [])
    .factory('ui', function ($rootScope) {
        var service = {
            showConfirm: function (title, text, callback) {
                $rootScope.showModal = true;
            }
        };

        return service;
    }
);

我会在任何控制器：

中使用它

app.controller('MyCntl', function (ui) {
    $scope.delete = function (referer) {
        ui.showConfirm("Confirm", "Please confirm action", function () {});
    }
});

但我的问题是：如何将值从控制器，服务传递到指令？

Answer 1

这是一个掠夺者：http://plnkr.co/edit/JLDDsTzSAHaitsZ4dxtL?p=preview

将服务绑定到指令的范围：

app.directive('modal', function (ui) {
    return {
        restrict: 'E',
        replace: true,
        scope:{},
        templateUrl: 'modal.html',
        link: function(scope){
          scope.ui = ui;
        }
    }
});

<强>服务

angular.module('ui', [])
    .factory('ui', function ($rootScope) {

        var _callback = null;

        var service = {
            confirm: function(confirmed){
              if(confirmed) _callback();
              service.show = false;
              _callback = null;
            },
            showConfirm: function (title, text, callback) {
                service.show = true;
                service.title = title;
                service.text = text;
                _callback = callback;
            }
        };

        return service;
    }
);

<强>模板：

<div ng-if="ui.show" class="modal">
    <h2>{{ui.title}}</h2>
    <p>{{ui.text}}</p>
    <button ng-click="ui.confirm(true)">ok</button>
    <button ng-click="ui.confirm(false)">cancel</button>
</div>

Angularjs中从Controller到Service到Directive的值

1 个答案:

这是一个掠夺者：http://plnkr.co/edit/JLDDsTzSAHaitsZ4dxtL?p=preview