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

n > 2容器而不是ng-click的{{1}}活动。

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

接下来在控制器中使用方法调用div。

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

以下是一个例子：

ui-sref

示例控制器：

角 .module（ '应用程序'） .controller（'MainController'，MainController）;

$state.go(state);

您还可以检查click元素是否不是按钮。我没有对此进行测试，因此有可能当您将<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>绑定到MainController.$inject = [ '$scope', '$state' ]; function MainController($scope, AccessService, Overlay) { $scope.redirect = function(){ $state.go('newPage'); } }容器时，也可以在按钮内单击此容器内部，它将调用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>函数。

Answer 2

尝试使用ng-click="$event.stopPropagation()"停止嵌套事件中的事件传播，如angular-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>

多个包含ui-sref AngularJS

2 个答案: