UI Router - Состояние в URL

Question

UI Router - Состояние в URL

0

Здесь, в следующем коде, я должен изменить url при условии добавления, вычитания и умножения.
Я хочу добавить условие для добавления, вычитания и умножения в url, что-то вроде /:add?:subtract?:multiply
поэтому, если я нажимаю на функцию add() только /:add have to work in url same if я click on function only sub()/: subtract 'должны работать в URL-адресе

состояние

angular.module("app");
  .config(function ($stateProvider) {
    $stateProvider.state('main', {
// here in url I have to apply conditions
      'url': '/:add/:subtract/:multiply',
      'abstract': true,
      'templateUrl': '/main.html',
      'controller': 'MainController'
    });
});

контроллер

.controller('LandingController', function ($rootScope, $scope, $state) {
    $scope.add = false;
    $scope.subtract = false;
    $scope.multiply = false;
    $scope.add = function () {
        $state.go("main.addition", {'add': true}, {'reload': true});
    };
    $scope.sub = function () {
        $state.go("main.subtraction", {'subtract': true}, {'reload': true});
    };
    $scope.multiply = function () {
        $state.go("main.multiplication", {'multiply': true}, {'reload': true});
    };
})

============= Main controller =================

.controller('MainController', function ($scope, $stateParams) {
    $scope.add = $stateParams.add;
    $scope.subtract = $stateParams.subtract;
    $scope.multiply = $stateParams.multiply;
});

Когда я нажимаю на метод add() он должен перенаправлять на url '/true/addition..'
Когда я нажимаю на метод sub() он должен перенаправлять на url '/true/subtraction..'
Когда я нажимаю на метод multiply() он должен перенаправлять на url '/true/multiplication..'

Но теперь моя проблема заключается в перенаправлении на url '/true///addition' или '//true//subtraction' или '///true/multiplication' котором отображается правая страница
но когда я обновляю страницу, URL-адрес этого времени будет изменен и сбой приложения.

main.html

<div ng-if="add" > Addition </div>
<div ng-if="subtract" > Subtraction </div>
<div ng-if="multiply" > Multiplication </div>

landing.html

<a href="#" ng-click="add()"> Addition </a>
<a href="#" ng-click="sub()"> Subtraction </a>
<a href="#" ng-click="multiply()"> Multiplication </a>

Здесь add, subtract, multiply - это логические переменные, которые получаются из $state.go.

ojus kulkarni 22 июль 2016, в 16:29

Источник

0

Я бы не использовал булевы значения сам. Я бы использовал обычный текст, стиль enum: "add", "sub", "multiply" и просто использовал стратегическую логику, чтобы выбрать, какой параметр установить в области. Это будет выглядеть лучше в URL
Callum Linington 22 июль 2016, в 13:44
0

да @CallumLinington вы правы, но даже если мы будем использовать переменные в стиле enum, то также, как применить к нему условие.?
ojus kulkarni 22 июль 2016, в 14:00
0

С высокого уровня, что вы пытаетесь достичь
Callum Linington 22 июль 2016, в 14:03
0

Здесь на самом деле, когда я нажимаю на функцию add( ) она идет с URL '/true///addition' . вместо этого он должен идти по URL '/true/addition' же самое для вычитания, он идет по URL '//true//subtraction' вместо этого он должен идти по '/true/subtraction' из-за неправильного URL, когда Я перезагружаю страницу, на которой идет неопрятный URL, который не имеет контента, подобного '/true///'
ojus kulkarni 22 июль 2016, в 14:16

Показать ещё 2 комментария

Теги:

angularjs

angular-ui-router

2 ответа

Ещё вопросы

Я бы не использовал булевы значения сам. Я бы использовал обычный текст, стиль enum: "add", "sub", "multiply" и просто использовал стратегическую логику, чтобы выбрать, какой параметр установить в области. Это будет выглядеть лучше в URL
да @CallumLinington вы правы, но даже если мы будем использовать переменные в стиле enum, то также, как применить к нему условие.?
С высокого уровня, что вы пытаетесь достичь
Здесь на самом деле, когда я нажимаю на функцию add( ) она идет с URL '/true///addition' . вместо этого он должен идти по URL '/true/addition' же самое для вычитания, он идет по URL '//true//subtraction' вместо этого он должен идти по '/true/subtraction' из-за неправильного URL, когда Я перезагружаю страницу, на которой идет неопрятный URL, который не имеет контента, подобного '/true///'

krutkowski86 · Answer 1 · 2016-07-22T11-39-00.000Z

Я думаю, что вы пытаетесь добиться этого:

 $stateProvider
    .state('main', {
      'url': '/',
      'abstract': true,
      'templateUrl': '/main.html',
      'controller': 'MainController'
    })
    .state('main.addition',{
      url: ':a/addition'
    })
    .state('main.subtraction',{
      url: ':b/subtraction'
    })
    .state('main.multiplication',{
      url: ':c/multiplication'
    });

main.html

<div ui-view=""></div>

landing.html

<a ui-sref="main.addition({a:true})"> Addition </a>
<a ui-sref="main.subtraction({b:true})"> Subtraction </a>
<a ui-sref="main.multiplication({c:true})"> Multiplication </a>

Трудно сказать, для чего вам нужны эти параметры: a, b, c.

Здесь работает jsfiddle - http://jsfiddle.net/irhabi/gsrg9cok/

Я думаю, это должно выглядеть так: http://jsfiddle.net/irhabi/enurj8uu/

да, вы правы, но я должен наложить условие на контент, который доступен в main.html и именно поэтому я использую эти переменные в stateParams . Я обновил переменные a, b, c в своем вопросе
@ojuskulkarni Проверьте мой jsfiddle в ответе выше. Вам не нужны эти параметры (a, b, c), потому что имя состояния определяет их.
да, ваша скрипка main.html но у меня есть несколько полей в main.html и main - это родительское состояние, поэтому, когда бы он ни main.html на разных страницах, содержимое main.html всегда одинаково для его дочерних страниц, и я хочу скрыть и показать некоторое содержимое на main.html страница
@ojuskulkarni Ты определил другие штаты? main.addition, main.substraction ...?
да у меня уже есть другие штаты и все эти штаты работают нормально
Я пытался таким образом, но у меня есть одна проблема, если у меня есть три различных <div> или любой другой контент в main.html и я должен показать каждый <div> при условии, т.е. если состояние является main.addition({a:true}) тогда я должен показать div 1 аналогично, если состояние main.subtraction({b:true}) тогда я должен показать div 2 и скрыть другое. тогда в таком состоянии, как применить условие в main.html
Попробуйте это так jsfiddle.net/irhabi/r9krh1dx

Priya Payyavula · Answer 2 · 2016-07-22T12-35-00.000Z

Я бы предложил указать URL отдельно. потому что, глядя на количество раз, когда он принимает '/', похоже, что он проверяет весь URL-адрес, и слово, которое соответствует отображению, но оно не пропускает, '/'