指令控制器中从其他控制器调用的方法

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (39)

我有一个指令,它有自己的控制器。见以下代码:

var popdown = angular.module('xModules',[]);

popdown.directive('popdown', function () {
    var PopdownController = function ($scope) {
        this.scope = $scope;
    }

    PopdownController.prototype = {
        show:function (message, type) {
            this.scope.message = message;
            this.scope.type = type;
        },

        hide:function () {
            this.scope.message = '';
            this.scope.type = '';
        }
    }

    var linkFn = function (scope, lElement, attrs, controller) {

    };

    return {
        controller: PopdownController,
        link: linkFn,
        replace: true,
        templateUrl: './partials/modules/popdown.html'
    }

});

这是一个错误/通知/警告的通知系统。我想做的是从另一个控制器(而不是指令控制器)调用函数。show在这个控制器上。当我这样做的时候,我也希望我的链接函数检测到一些属性发生了变化,并执行了一些动画。

下面是一些代码来举例说明我想要的内容:

var app = angular.module('app', ['RestService']);

app.controller('IndexController', function($scope, RestService) {
    var result = RestService.query();

    if(result.error) {
        popdown.notify(error.message, 'error');
    }
});

所以当打电话的时候showpopdown指令控制器,链接函数也应该被触发并执行动画。我怎么能做到这一点?

提问于
用户回答回答于

基本上,我没有尝试从控制器调用指令,而是创建了一个模块来容纳所有的弹出逻辑:

var PopdownModule = angular.module('Popdown', []);

我在模块里放了两样东西factory对于可以在任何地方注入的API,以及directive用于定义实际弹出元素的行为:

工厂只是定义了几个函数successerror并跟踪几个变量:

PopdownModule.factory('PopdownAPI', function() {
    return {
        status: null,
        message: null,
        success: function(msg) {
            this.status = 'success';
            this.message = msg;
        },
        error: function(msg) {
            this.status = 'error';
            this.message = msg;
        },
        clear: function() {
            this.status = null;
            this.message = null;
        }
    }
});

该指令将API注入其控制器,并监视API中的更改(为了方便起见,我使用了引导CSS):

PopdownModule.directive('popdown', function() {
    return {
        restrict: 'E',
        scope: {},
        replace: true,
        controller: function($scope, PopdownAPI) {
            $scope.show = false;
            $scope.api = PopdownAPI;

            $scope.$watch('api.status', toggledisplay)
            $scope.$watch('api.message', toggledisplay)

            $scope.hide = function() {
                $scope.show = false;
                $scope.api.clear();
            };

            function toggledisplay() {
                $scope.show = !!($scope.api.status && $scope.api.message);               
            }
        },
        template: '<div class="alert alert-{{api.status}}" ng-show="show">' +
                  '  <button type="button" class="close" ng-click="hide()">&times;</button>' +
                  '  {{api.message}}' +
                  '</div>'
    }
})

然后我定义app依赖于Popdown:

var app = angular.module('app', ['Popdown']);

app.controller('main', function($scope, PopdownAPI) {
    $scope.success = function(msg) { PopdownAPI.success(msg); }
    $scope.error   = function(msg) { PopdownAPI.error(msg); }
});

HTML看起来像:

<html ng-app="app">
    <body ng-controller="main">
        <popdown></popdown>
        <a class="btn" ng-click="success('I am a success!')">Succeed</a>
        <a class="btn" ng-click="error('Alas, I am a failure!')">Fail</a>
    </body>
</html>

我不确定这是否是完全理想的,但这似乎是一种合理的方式来建立一个全球性的弹出指令沟通。

用户回答回答于

还可以使用事件触发Popdown。

它不使用Popdown api,而使用顶级控制器。$broadcast“成功”和“错误”事件在作用域链上:

$scope.success = function(msg) { $scope.$broadcast('success', msg); };
$scope.error   = function(msg) { $scope.$broadcast('error', msg); };

然后Popdown模块为这些事件注册处理程序函数,例如:

$scope.$on('success', function(event, msg) {
    $scope.status = 'success';
    $scope.message = msg;
    $scope.toggleDisplay();
});

至少,这是可行的,在我看来,这是一个很好的解耦解决方案。

扫码关注云+社区