Javascript Angularjs中从控制器到服务到指令的值

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

现在我正在尝试在AngularJS中应用相同的逻辑。因此，我创建了一个指令：

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

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

使用以下模板：

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

我会从任何控制器使用它：

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

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

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

这里有一个例子： 将服务绑定到指令的范围：

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>

服务：

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>

模板：

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>

{{ui.title}
{{ui.text}

好啊
取消

看看这个项目，你可以使用它，也可以在那里找到你需要的方法谢谢你@doodeec我来看看代码。我也在使用bootstrap，所以我可以按原样使用库，但我很好奇你是如何做到的，谢谢。谢谢@Ilan这正是我需要的，但我不明白为什么在我的网站上忽略了“show”变量。。。奇怪的我试图打印标签中的值，它显示了确切的值（true），但无论如何都不会显示模式。有什么想法吗（我正在使用angular 1.2.13I，我也尝试过ng show，但它没有改变，似乎忽略了ui.show。但是，如果我使用全局变量（$rootScope）is works，我将使用这种方式，直到我发现ui.show的问题所在