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

Question

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

0

Я не уверен, как правильно выполнить следующее:

Рассмотрим, например, что я хочу создать свою собственную директиву списков переключателей, что-то вроде этого:

<my-radio-button-list>
    <my-radio-button>
        ...Some HTML content...
    </my-radio-button>
    <my-radio-button>
        ...Some HTML content...
    </my-radio-button>
    <my-radio-button>
        ...Some HTML content...
    </my-radio-button>      
</my-radio-button-list>

Обратите внимание: директива <my-radio-button> не обязательно использует элементы <input>.

Я бы хотел, чтобы <my-radio-button> будет иметь свой собственный внутренний прослушиватель событий, чтобы отслеживать, когда он был нажат, и мне также понравилось бы, когда была нажата директива <my-radio-button>, она уведомит родительский <my-radio-button-list> чтобы такое событие произошло, поэтому родительская директива изменит DOM соответственно - он отменит выбор текущего выбранного элемента и выберет элемент, который был нажат.

Каков правильный способ добиться чего-то подобного?

Единственный способ, которым я мог подумать, - создать метод на родительском директивном контроллере, который будет манипулировать DOM как обязательно (который получит в качестве параметра вновь выбранный элемент), а затем поделиться родительским директивным контроллером с его дочерними директивами ( поэтому они могут вызывать этот метод из обработчиков событий кликов). Однако я знаю, что этот подход неверен, потому что контроллер никогда не должен манипулировать DOM.

Благодарю!

gipouf 03 нояб. 2015, в 00:59

Источник

Теги:

javascript

html

angularjs

dom

angular-directive

1 ответ

Ещё вопросы

HankScorpio · Accepted Answer · 2015-11-02T22-32-00.000Z

Использование событий (а не просто событий щелчка) было бы простым способом сделать это.

child (my-radio-button) html:

<button ng-click="childController.handleClick()">{{childController.childData.id}}</button>
<span ng-if="parentController.currentSelection.id === childController.childData.id">THERE CAN ONLY BE ONE!!!</span>

Контроллер ребенка (моя радио-кнопка):

controller.childData = {id: 'child1'};

controller.handleClick = function(){
  $scope.$emit('childClicked', childData);
};

parent (my-radio-button-list) html:

<div>
  <ng-transclude></ng-transclude>
<div>

родительский (my-radio-button-list) контроллер:

$scope.$on('childClicked', function(childData){
  controller.currentSelection = childData;
});