Как отличить несколько директив в одной и той же $ -области?

Question

Я на самом деле назвать директивные функции из контроллеров, как это:

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

highlight(), будучи функцией в директиве.

Что делать, если у меня было две разные директивы, каждая из которых имеет свою собственную функцию highlight()?

Есть ли способ получить фактическую директиву объект, вместо доступа к директивной функции непосредственно через $ scope?

Я предпочел бы быть четко о директиве я хочу использовать, например:

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

Возможно ли это?

Если вы хотите знать, почему я хочу контроллер говорить с директивой, вот пример:

Мой контроллер получает булавку аутентификации от пользователя и отправляет его на службу. Служба возвращает значение 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

Это кажется странным, что контроллер должен вызвать метод из директивы. Не могли бы вы предоставить более подробную информацию о том, почему вы это делаете?

Кажется, что вы хотите, чтобы ваш контроллер и директивы разговаривали вместе. Для этого вот несколько вариантов.

Вы можете использовать события слушателей, как описано в Creating a Directive that Adds Event Listeners разделе doc, если она основана на браузере событий

Вы можете использовать angular events транслировать события.

Наконец, вы можете настроить параметр в своем шаблоне директивы, указав, что это выделение.

Редактировать основанный на вопрос редактирования:

Если вам нужно только изменение CSS вы можете использовать атрибут ng-class на вашей директиве, как это:

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

Использование attribut вы можете сделать следующее :

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, и ваша директива наблюдает за этим свойством, поэтому при его изменении он выполняет определенную функцию.

Возможная реализация может быть:

Контроллер:

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