操縱DOM由於兒童指令引發的事件

考慮，例如起見，我想創建自己的自定義單選按鈕列表中的指令，這樣的事情：

<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>指令，發生這樣的事件，所以parent指令將相應地更改DOM - 它將取消選擇當前選定的項目，並選擇被單擊的項目。

什麼是正確的方式來實現這樣的事情？

我能想到的唯一方法是在父指令的控制器上創建一個方法，它將按需要操作DOM（它將作爲新選擇的項的參數），然後與父指令的控制器共享它的子指令（所以他們可以從它們的click事件處理程序中調用這個方法）。但是，我知道這種方法是錯誤的，因爲控制器不應該操縱DOM。

謝謝！

來源

2015-11-02 gipouf

使用事件（不只是點擊事件）將是一個簡單的方法來做到這一點。

孩子（我的無線電按鈕）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); 
};

父（我-單選按鈕列表）的html：

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

父（我-單選按鈕列表）控制器：

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

來源

2015-11-03 00:28:14 HankScorpio

操縱DOM由於兒童指令引發的事件

回答

相關問題