AngularJS - Установка переменных $ области видимости контроллера в пользовательской директиве, которая получает доступ к DOM

Question

Я просто ответил на вопрос здесь

How i send value when i click button to server and popup directive

Его код выглядел как этот

<div ng-controller="IndexController"> 
    <label id="number" >5</label> 
    <input type="button" ng-click="getUserDetails()" > 
</div> 

Он пытался получить доступ к элементу label с идентификатором #number.

Я понимаю, что в Angular DOM-манипуляции и запросы должны выполняться в пользовательской директиве, а не внутри контроллера. Поэтому я дал это решение.

Поскольку вы хотите получить доступ к значению числа, вы взаимодействуете с DOM. Лучшим решением для этого является создание пользовательских директив. Вот пример.

angular.module('myApp', []) 
    .directive('getValue', function({ 
     restrict: 'A', 
     link: function(scope, elem, attrs) { 
      elem.bind("click", function() { 
       scope.value = elem.prev().text(); 
      }); 

     } 
    }); 

Я знаю, что в link функции директивы, вы передать в области видимости, элементе и ATTRS как пары. В этой строке я пытаюсь установить переменную scope в значение метки.

scope.value = elem.prev().text(); 

Но у меня есть подозрение, что я не делаю это правильно. Поскольку директивы - это путь, как я могу это сделать.

Я также проверил это в качестве ссылки

Easiest way to pass an AngularJS scope variable from directive to controller?

Я читал о controller функции внутри директивы, но мне нужно link функцию для получения значения из DOM.

Answer 1

Для этого не требуется специальная директива. ng-click может работать:

$scope.getUserDetails = function(e){ 
    $scope.value = e.target.previousElementSibling.innerHTML; 
} 

HTML

<div ng-controller="IndexController"> 
    <label id="number" >5</label> 
    <input type="button" ng-click="getUserDetails($event)" > 
</div> 

$event