Question

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

当我从控制器更新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

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

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

Answer 2

绑定事件超出了Angular的范围。 Angular不知道该事件已被解雇。

因此，您必须在$ apply函数中包含您的调用：

$scope.$apply(function(){
  element.bind('click', function(){
    ModalAPI.open('After directive click')
  })
});

进一步阅读：$scope

可以从控制器更新工厂，但不能从指令更新

2 个答案: