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>。 1}}指示发生此类事件，因此父指令将相应地更改DOM - 它将取消选择当前所选项目，并将选择被单击的项目。

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

我能想到的唯一方法是在父指令的控制器上创建一个方法，该方法将作为必要的操作DOM（将获取新选择的项作为参数），然后与其共享父指令的控制器children指令（因此他们可以从他们的click事件处理程序中调用此方法）。但是，我知道这种方法是错误的，因为控制器永远不应该操纵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-list）html：

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

parent（my-radio-button-list）控制器：

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

由于child指令引发的事件，操纵父指令的DOM

1 个答案: