javascript - Angularjs 中从控制器到服务再到指令的值

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 中使用模态标记。

现在，为了控制模态行为，我想使用service，例如：

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>