javascript - 可以从 Controller 更新工厂，但不能从指令更新工厂

Question

我正在尝试创建一个可以从应用程序中的任何位置调用的模态模块，但我遇到了一个问题，该问题可能突出了我的误解，但我看不到它是什么。

这是我想要实现的目标的 jsFiddle:http://jsfiddle.net/dwSX8/2/

当我从 Controller 更新 ModalAPI 时，一切都按预期工作，但当我从指令执行相同操作时，什么也没有。

所以我的 HTML 是:

<div ng-app="app">
    <div ng-controller="AppCtrl">
        <button ng-click="logout()">Via Controller</button>
        <button logout>Via Directive</button>
    </div>
    <modal></modal>
</div>

还有我的 Angular JS 东西:

angular.module('Modal', [])
.factory('ModalAPI', function () {

    return {
        title: 'Before click',             
        open: function(title){
            console.log('new title: ' + title);
            this.title = title;
        }
    }
})

.directive('modal', function(){

    return {
        restrict: 'E',
        scope: {},
        replace:true,
        controller: function($scope, ModalAPI){

            $scope.m = ModalAPI;

            $scope.$watch('modal.title', toggle);

            function toggle() {
                console.log(' ---------- Modal changed!!!!');
            };
        },
        template: '<div>{{m.title}}</div>'
    };
})

angular.module('app', ['Modal'])
.controller('AppCtrl',  function ($scope, ModalAPI) {
    $scope.logout = function(){
         console.log('clicked');
         ModalAPI.open('After controller click')
    }
})
.directive('logout', function(){
    return{
        restrict: 'E',
        link: function($scope, element, ModalAPI) {
            element.bind('click', function(){
                ModalAPI.open('After directive click')
            })
        }
    }
})

Answer 1

您应该在声明指令的位置注入(inject)服务，而不是在链接函数中。链接函数中的第三个参数是元素的属性。

.directive('logout', function(ModalAPI){
    return{
        restrict: 'E',
        link: function($scope, element) {
            element.bind('click', function(){
                ModalAPI.open('After directive click')
            })
        }
    }
})