从其他控制器调用指令控制器中的方法 [英] Call method in directive controller from other controller

问题描述

我有一个拥有自己的控制器的指令。请参阅以下代码：

I have a directive that has its own controller. See the below code:

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 。当我这样做时，我还希望我的链接功能检测到某些属性已更改并执行一些动画。

This is meant to be a notification system for errors/notifications/warnings. What I want to do is from another controller (not a directive one) to call the function show on this controller. And when I do that, I would also want my link function to detect that some properties changed and perform some animations.

以下是一些代码来举例说明我的要求for：

Here is some code to exemplify what I'm asking for:

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

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

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

所以在<$上调用 show 时c $ c> popdown 指令控制器，还应触发链接功能并执行动画。我怎么能实现呢？

So when calling show on the popdown directive controller, the link function should also be triggered and perform an animation. How could I achieve that?

推荐答案

这是一个有趣的问题，我开始考虑如何实现这样的事情。

This is an interesting question, and I started thinking about how I would implement something like this.

我想出了这（小提琴）;

基本上，我没有尝试从控制器调用指令，而是创建了一个模块来存放所有弹出逻辑：

Basically, instead of trying to call a directive from a controller, I created a module to house all the popdown logic:

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

我在模块中放了两件东西，一个工厂用于可以在任何地方注入的API，指令用于定义实际popdown元素的行为：

I put two things in the module, a factory for the API which can be injected anywhere, and the directive for defining the behavior of the actual popdown element:

工厂只定义了几个函数 success 和 error 并跟踪几个变量：

The factory just defines a couple of functions success and error and keeps track of a couple of variables:

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以方便）：

The directive gets the API injected into its controller, and watches the api for changes (I'm using bootstrap css for convenience):

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 模块on Popdown ：

Then I define an app module that depends on 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>

我不确定它是否完全理想，但它似乎是建立通信的合理方式使用global-ish popdown指令。

I'm not sure if it's completely ideal, but it seemed like a reasonable way to set up communication with a global-ish popdown directive.

再次，作为参考，小提琴。

这篇关于从其他控制器调用指令控制器中的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！