ui-sref AngularJS的多個包含

Question

我在AngularJS ui-sref和HTML中遇到一個小問題。

我想創建一個包含多個按鈕的Div。 每個按鈕都必須重定向到特定頁面，但是如果單擊主Div而不是按鈕，則希望移至另一頁面。

這是我的代碼示例：

<div id="main" ui-sref="main_page">
    <button id="button1" ui-sref="page1">Page 1</button>
    <button id="button2" ui-sref="page2">Page 2</button>
    <button id="button3" ui-sref="page3">Page 3</button>
    <button id="button4" ui-sref="page4">Page 4</button>
</div>

但是，無論我單擊哪里，它都會將我重定向到“ main_page”。

您有解決的主意嗎？ 謝謝

Answer 1

您的div容器而不是ui-sref的ng-click事件。

https://docs.angularjs.org/api/ng/directive/ngClick

接下來在控制器中使用您的方法調用$state.go(state); 。

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state。$ state

這是一個例子：

<div id="main" ng-click="redirect()">
    <button id="button1" ui-sref="page1">Page 1</button>
    <button id="button2" ui-sref="page2">Page 2</button>
    <button id="button3" ui-sref="page3">Page 3</button>
    <button id="button4" ui-sref="page4">Page 4</button>
</div>

和示例控制器：

angular .module（'App'）.controller（'MainController'，MainController）;

MainController.$inject = [
    '$scope',
    '$state'
];

function MainController($scope, AccessService, Overlay) {
    $scope.redirect = function(){
        $state.go('newPage');
    }
}

您還可以檢查click元素是否不是按鈕。 我尚未對此進行測試，因此當您將ngClick綁定到div容器，然后在該容器內單擊按鈕時，它可能會調用redirect方法。

檢查示例：

$scope.redirect = function(event) {
   if(event.target.className !== 'button')
       $state.go('newPage');
}

您需要向按鈕添加類：

<div id="main" ng-click="redirect($event)">
    <button class="button" id="button1" ui-sref="page1">Page 1</button>
    <button class="button" id="button2" ui-sref="page2">Page 2</button>
    <button class="button" id="button3" ui-sref="page3">Page 3</button>
    <button class="button" id="button4" ui-sref="page4">Page 4</button>
</div>

請記住將$event傳遞給redirect函數。

Answer 2

嘗試使用ng-click="$event.stopPropagation()"停止嵌套事件中的事件傳播，如angular-ui https://github.com/angular-ui/ui-router/wiki/Frequently所述提出的問題＃如何防止所有觸發觸發嵌套ui sref對象 。

您的代碼將如下所示：

<div id="main" ui-sref="main_page">
    <button id="button1" ui-sref="page1" ng-click="$event.stopPropagation()">Page 1</button>
    <button id="button2" ui-sref="page2" ng-click="$event.stopPropagation()">Page 2</button>
    <button id="button3" ui-sref="page3" ng-click="$event.stopPropagation()">Page 3</button>
    <button id="button4" ui-sref="page4" ng-click="$event.stopPropagation()">Page 4</button>
</div>