Javascript 如何区分同一$scope中的多个指令？

实际上，我从如下控制器调用指令函数：

function myControllerFunction = function () {
    $scope.highlight();
}

function myControllerFunction = function () {
    $scope.myDirective.highlight();
}

angular.module('clockin').directive('grDisplay', function ($q, $timeout) {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attrs) {

            $attrs.observe('color', function (color) {
                var deferred = $q.defer();

                $element.effect("highlight", { color: color }, 500);

                $element.find("span").css('color', '#000')
                    .animate({ opacity: 0 }, 500, function () {
                        $element.find("span").css('opacity', 1).css('color', '#fff')
                    });

                $timeout(deferred.resolve, 500);

                return deferred.promise;
            });
        }
    }
});

highlight（）

，是指令中的函数

如果我有两个不同的指令，每个指令都有自己的

highlight（）

函数，会怎么样

有没有办法获取实际的指令对象，而不是直接通过$scope访问指令函数

我希望明确说明我要使用的指令，如下所示：

function myControllerFunction = function () {
    $scope.highlight();
}

function myControllerFunction = function () {
    $scope.myDirective.highlight();
}

angular.module('clockin').directive('grDisplay', function ($q, $timeout) {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attrs) {

            $attrs.observe('color', function (color) {
                var deferred = $q.defer();

                $element.effect("highlight", { color: color }, 500);

                $element.find("span").css('color', '#000')
                    .animate({ opacity: 0 }, 500, function () {
                        $element.find("span").css('opacity', 1).css('color', '#fff')
                    });

                $timeout(deferred.resolve, 500);

                return deferred.promise;
            });
        }
    }
});

可能吗

如果您对我为什么希望控制器与指令对话感到好奇，下面是一个示例：

我的控制器从用户处接收身份验证pin并将其提交给服务。如果pin有效，服务将返回true，否则返回false

在我的控制器函数中，我检查布尔返回值。如果是真的，我调用一个名为highlight的指令函数，如果是真的，它只会以绿色突出显示div，否则，我调用它以红色突出显示div

以下是我的控制器功能：

$scope.keypadEnter = function () {
    userService.isCodeValid($scope.code).then(function (result)
    {
        if (JSON.parse(result.data)) {
            $scope.highlight("lime").then(function () {
                $scope.code = "";
                $location.path('/clockin');
            });
        }
        else
        {
            $scope.highlight("red").then(function () {
                $scope.resetDisplay();
                $scope.code = "";
            });
        }
    });
};

...
link: function ($scope, $element, $attrs) {
    $scope.highlight = function (color) {
        var deferred = $q.defer();

        $element.effect("highlight", { color: color }, 500);

        $element.find("span").css('color', '#000')
            .animate({ opacity: 0 }, 500, function () {
                $element.find("span").css('opacity', 1).css('color', '#fff')
            });

        $timeout(deferred.resolve, 500);

        return deferred.promise;
    }
...

这是我的指令的突出显示功能：

$scope.keypadEnter = function () {
    userService.isCodeValid($scope.code).then(function (result)
    {
        if (JSON.parse(result.data)) {
            $scope.highlight("lime").then(function () {
                $scope.code = "";
                $location.path('/clockin');
            });
        }
        else
        {
            $scope.highlight("red").then(function () {
                $scope.resetDisplay();
                $scope.code = "";
            });
        }
    });
};

...
link: function ($scope, $element, $attrs) {
    $scope.highlight = function (color) {
        var deferred = $q.defer();

        $element.effect("highlight", { color: color }, 500);

        $element.find("span").css('color', '#000')
            .animate({ opacity: 0 }, 500, function () {
                $element.find("span").css('opacity', 1).css('color', '#fff')
            });

        $timeout(deferred.resolve, 500);

        return deferred.promise;
    }
...

根据您的建议，我已将指令代码更改为监视

$scope.color

变量，如下所示：

function myControllerFunction = function () {
    $scope.highlight();
}

function myControllerFunction = function () {
    $scope.myDirective.highlight();
}

angular.module('clockin').directive('grDisplay', function ($q, $timeout) {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attrs) {

            $attrs.observe('color', function (color) {
                var deferred = $q.defer();

                $element.effect("highlight", { color: color }, 500);

                $element.find("span").css('color', '#000')
                    .animate({ opacity: 0 }, 500, function () {
                        $element.find("span").css('opacity', 1).css('color', '#fff')
                    });

                $timeout(deferred.resolve, 500);

                return deferred.promise;
            });
        }
    }
});

这是我的视图代码：

<div data-gr-display ng-attr-color="{{ color }}" class="display"><span>{{code}}</span></div>

---

看起来很奇怪，您的控制器必须从指令调用方法。你能提供更多关于你为什么这样做的信息吗

似乎您希望允许控制器和指令一起对话。为此，这里有几个选择

如果基于浏览器事件，则可以使用事件侦听器，如创建添加事件侦听器的指令中所述

你可以用它来广播事件

最后，您可能希望调整指令模板上的一个参数，说明它是高亮显示

根据问题编辑：

如果您只需要更改CSS，您可以在指令上使用

ng class

属性，如下所示：

<my-directive ng-class="{{ status }}"></my-directive>

在你看来：

<my-directive ng-attr-color="{{ color }}"></my-directive>

或者，如果您想要一个通知系统，您可以参考

---

（但我仍然不明白为什么需要几个指令来解决问题）

通常，与指令通信的方式是通过属性，您通常不在指令级别定义控制器范围中的方法

我相信在您的情况下，正确的方法是在指令中使用一个绑定到scope属性的属性，并且您的指令监视该属性，因此当它更改时，它会运行特定的函数

一种可能的实施方式可以是：

控制器：

$scope.onHightlight = function() {
   if ($scope.highlightColor === 'lime') {
       scope.code = "";
       $location.path('/clockin');
   } else {
       $scope.resetDisplay();
       $scope.code = "";
   }
});
$scope.keypadEnter = function () {
    userService.isCodeValid($scope.code).then(function (result) {
        if (JSON.parse(result.data)) {
            $scope.highlightColor = "lime";
        }
        else {
            $scope.highlightColor = "red";
        }
    });
};

指令：

link: function ($scope, $element, $attrs) {
    var onHightlight = $scope.$eval($attrs['onHightlight']);

    $scope.$watch($attrs['hightlight'], function(color) {

        $element.effect("highlight", { color: color }, 500);

        $element.find("span").css('color', '#000')
            .animate({ opacity: 0 }, 500, function () {
                $element.find("span").css('opacity', 1).css('color', '#fff')
            });

        $timeout(onHightlight, 500);
    }
 ....
}

HTML:

我编辑了我的问题，以解释我为什么要这样做。谢谢，你说得对。我的问题不需要一个以上的指令。我只是对控制器-->指令通信感到困惑，以防在同一范围内处理多个指令。为了回答您最后的评论，我不确定这是否只是CSS的改变：我使用jQueryUI的highlight方法。这在ng类中可行吗？我不确定是否只在jquery ui中使用CSS，但我提供了一个基于属性的示例我很抱歉。我不知道ng attr。ng attr颜色来自哪里？这是您为属性指定的自定义名称吗？实际上，我要突出显示的是背景色。我还使前景颜色淡出。这只是一种避免浏览器拒绝某些属性的方法。请参见此处的angular doc（

ngAttr属性绑定

部分），而不是从控制器显式调用函数，在每个指令的link函数中显式定义scope对象不是更容易混淆吗？i、 e.$scope.highlightA=等？然后打$scope.highlightA或B？这是个好主意。谢谢唯一的问题是，因为我已经阅读了Adlen下面的答案，我不确定我是否做得对（从控制器方法调用指令）。有没有更好的方法来实现这一点？这通常是服务的工作，将其注入控制器并使用其方法或数据对象，但如果这对您有效，我想这没关系（直到：P）我刚刚用可能的实现更新了我的答案，看一看，让我知道它是否对您有效。谢谢。你能提供一个基于我为我的指令提供的代码的例子吗？非常感谢你花时间在这方面。有一个指令监视范围是一个好办法。