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>