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

Can update factory from controller but not from directive

本文关键字：更新 但不能 指令 工厂 控制器      更新时间：2023-09-26

我正试图创建一个可以从应用程序中任何地方调用的Modal模块，但我遇到了一个问题，可能会突出我的误解，但我看不清它是什么。

以下是我努力实现的目标：http://jsfiddle.net/dwSX8/2/

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

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

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

绑定事件不在Angular的范围内Angular不知道事件已被触发。

因此，您必须将调用封装在$apply函数中：

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

进一步阅读：$scope

相关文章：