ui-sref AngularJS的多重包含

Question

我遇到了一个小问题的AngularJS ui-sref和Html。

我想创建一个包含多个按钮的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

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

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>

和示例控制器：

角.module('App') .controller(主控制器，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()"来停止嵌套事件中的事件传播，如角ui https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-prevent-nested-ui-sref-objects-from-all-firingtriggering所描述的那样。

然后，您的代码将如下所示：

<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>