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

Question

我实际上是从这样的控制器调用指令函数：

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

highlight()，是指令中的一个函数。

如果我有两个不同的指令，每个指令都有自己的highlight() 函数怎么办？

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

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

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

这可能吗？

如果你想知道为什么我想让控制器与指令对话，这里有一个例子：

我的控制器从用户那里收到一个身份验证密码并将其提交给服务。如果 pin 有效，则服务返回 true，否则返回 false。

在我的控制器函数中，我检查布尔返回值。如果是真的，我调用一个指令函数，叫做highlight，如果它是真的，它只是将一个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.color 变量，如下所示：

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>

但我收到此错误：

TypeError: object doesn't support this property or method « observe »
   at link (http://localhost:18000/App/clockin/keypad/display-directive.js:6:13)
   at nodeLinkFn (http://localhost:18000/Scripts/angular.js:6692:13)
...

Answer 1

您的控制器必须从指令中调用方法似乎很奇怪。您能否提供更多信息说明您为什么这样做？

您似乎想让您的控制器和指令一起交谈。为此，这里有几个选项。

如果基于浏览器事件，您可以使用 doc 的 Creating a Directive that Adds Event Listeners 部分中描述的事件侦听器

您可以使用angular events 来广播事件。

最后你可能想在你的指令模板上调整一个参数，说它是高亮的。

根据问题编辑：

如果您只需要更改 CSS，您可以在指令中使用 ng-class 属性，如下所示：

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

使用属性，您可以执行以下操作：

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;
}

在你看来：

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

或者如果你想要一个通知系统，你可以参考Angular UI Bootstrap alert （但我仍然不明白为什么你需要几个指令来解决你的问题）

Answer 2

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

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

一个可能的实现可能是：

控制器：

$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：

<your-directive highlight="highlightColor" onHighlight="onHightlight"></your-directive>