Многократное включение ui-sref AngularJS

Question

Многократное включение ui-sref AngularJS

0

Я сталкиваюсь с небольшой проблемой с 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>

НО, когда я нажимаю, он перенаправляет меня на "главную страницу".

У вас есть идея решить эту проблему? благодаря

Rémi P 01 фев. 2016, в 12:30

Источник

Теги:

html

angularjs

2 ответа

0

Попробуйте использовать 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>

Ennedigi 01 фев. 2016, в 09:54

0

Это не сработало для меня: (...
Rémi P 01 фев. 2016, в 12:40

Ещё вопросы

Vardius · Accepted Answer · 2016-02-01T10-08-00.000Z

Событие 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>

И пример контроллера:

угловой.модуль ('App').controller('MainController', MainController);

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>

Не забудьте передать $event функции redirect.