由于子指令引发的事件，正在操纵父指令的 DOM

Question

我不确定如何以正确的方式完成以下操作：

考虑一下，例如，我想创建自己的自定义单选按钮列表指令，类似于：

<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 - 它将删除 select 当前 selected 项目，并将 select单击的项目。

实现这样的目标的正确方法是什么？

我能想到的唯一方法是在父指令的控制器上创建一个方法，该方法将根据需要操作 DOM（它将作为参数获取新的 selected 项），然后将父指令的控制器与其子指令共享（这样他们就可以从他们的点击事件处理程序中调用此方法）。但是，我知道这种做法是错误的，因为控制器永远不应该操纵 DOM。

谢谢！

Answer 1

使用事件（不仅仅是点击事件）将是一种简单的方法。

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>

child (my-radio-button) 控制器：

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

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

parent（my-radio-button-列表）html：

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

parent（my-radio-button-列表）控制器：

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

由于子指令引发的事件，正在操纵父指令的 DOM

Manipulating DOM of parent directive due to event raised by child directive

html

javascript

dom

angularjs

angular-directive