GVKun编程网logo

angularjs – 调用$location.search()后更新ui-router中的$stateParams(angularjs调用接口)

17

想了解angularjs–调用$location.search()后更新ui-router中的$stateParams的新动态吗?本文将为您提供详细的信息,我们还将为您解答关于angularjs调用接

想了解angularjs – 调用$location.search()后更新ui-router中的$stateParams的新动态吗?本文将为您提供详细的信息,我们还将为您解答关于angularjs调用接口的相关问题,此外,我们还将为您介绍关于angular-ui-router – 在StateChangeStart中不可用的Angular UI Router state.go参数、AngularJS $location.path(‘/’)不清除search()参数、angularjs $location.path仅在第二次单击时更新URL、AngularJS $routeParams vs $stateParams的新知识。

本文目录一览:

angularjs – 调用$location.search()后更新ui-router中的$stateParams(angularjs调用接口)

angularjs – 调用$location.search()后更新ui-router中的$stateParams(angularjs调用接口)

我有一个角度应用程序,它使用离子框架,后端使用ui-router.

在我的一个控制器中,我打电话给:

$location.search('filter','sometext');

我在路由配置中禁用了reloadOnSearch.我注意到更新位置不会更新$stateParams.有没有办法强制$stateParams更新位置更新?我查看了ui-router文档,但没有看到任何关于这种情况,但也许我错过了它.

解决方法

我有类似的情况.如果您已禁用reloadOnSearch,则无法跟踪路由更新,但我找到了此案例的解决方案.

观看$stateParams:

$scope.$watchCollection('$stateParams',function (newParams) {
    var search = $location.search();

    if (angular.isObject(newParams)) {
      angular.extend(search,newParams);
    }

    $location.search(search).replace();
});

更改$stateParams,而不是路由:

$scope.$stateParams.offset += $scope.$stateParams.limit;

完全working example.

angular-ui-router – 在StateChangeStart中不可用的Angular UI Router state.go参数

angular-ui-router – 在StateChangeStart中不可用的Angular UI Router state.go参数

我正在使用Angular UI路由器,我需要使用state.go方法发送参数.像这样:
$state.go('myState',{ redirect : true });

我还需要在事件stateChangeStart中检查该参数.像这样:

$rootScope.$on('$stateChangeStart',function (event,toState,toParams,fromState,fromParams) {
    //redirect parameter is not available here.
    //should be in toParams right?
}

编辑:这是我的statedeFinition:

$stateProvider.state('customer.search',{
        url: '/search',views: {
            "right-flyover@": {
                templateUrl: 'customer/search/search.tpl.html',controller: 'CustomerSearchCtrl'
            }
        },data: {
            pageTitle: 'Sök användare',hidden: true
        }
    });
ui-router将传递为状态层次结构定义的参数 – 我们正在导航到.请检查:

URL Parameters(引用:)

通常,URL具有动态部分,称为参数.有几个选项可用于指定参数.基本参数如下所示:

$stateProvider
    .state('contacts.detail',{
        url: "/contacts/:contactId",templateUrl: 'contacts.detail.html',controller: function ($stateParams) {
            // If we got here from a url of /contacts/42
            expect($stateParams).toBe({contactId: 42});
        }
    })

因此,如果您想使用param重定向,您的状态应如下所示:

$stateProvider.state('customer.search',{
    url: '/search/:redirect',...        
});

然后我们可以使用:

$state.go('customer.search',{ redirect : true });

这将是$statePrams的一部分

但也许您尝试使用已发送的选项,而不是参数:

> $state.go(to [,toParams] [,options])(引用:)

选项

Object – If Object is passed,object is an options hash. The following options are supported:

> location布尔值或“替换”(默认为true),如果为true将更新位置栏中的URL,如果为false则不会.如果字符串“replace”,将更新url并替换上一个历史记录.
> inherit Boolean(默认为true),如果为true,则从当前url继承url参数.
> relative stateObject(默认$state.$current),当使用相对路径(例如’^’)进行转换时,定义哪个状态是相对的.
> notify Boolean(默认为true),如果为true将广播$stateChangeStart和$stateChangeSuccess事件.
> reload v0.2.5布尔值(默认值为false),则强制转换,即使状态或参数没有改变,也就是重新加载相同的状态.它与reloadOnSearch不同,因为当你想在一切都相同时强制重新加载时你会使用它,包括搜索参数.

那将是第三个参数(重新加载而不是重定向):

$state.go('myState',null,{ reload: true });

AngularJS $location.path(‘/’)不清除search()参数

AngularJS $location.path(‘/’)不清除search()参数

我在用

$location.path('/login');

如果用户未登录,则重定向回登录页面,或者通常使用此方法在任何地方重定向.但是,如果我已经有一个看起来像这样的网址

/注册/最后的步?标记= mF6xY2cQvB9Vccb0J1l5uTu4H10lWkkf

并重定向到

$location.path( ‘/’);

那么搜索参数不会被清除,所以我得到这样的网址

/?标记= mF6xY2cQvB9Vccb0J1l5uTu4H10lWkkf

即使我使用UI-Router

$state.go('home');

?令牌= mF6xY2cQvB9Vccb0J1l5uTu4H10lWkkf

部分仍在那里.

我不明白.每次我需要去另一个州或网址时,我是否真的需要手动清除参数?这似乎不太好
我是合法的.我做错了什么?我不想做window.location.href,因为这会使整页重新加载,这不是我想做的事情.

我该怎么做才能清除参数?我一定做错了什么.

解决方法

网址之后的部分?被称为搜索(在角度 – 在其他方面它可以被称为查询).你只处理路径,这是?之前的部分.

你可以像这样使用它(是的,它的用途不仅仅是搜索…但在这个上下文中它的名字也是如此).

// Get the current value
var curr_search = $location.search();

// Clear the current search
$location.search({});

// Set the current search values
$location.search({key: "value"});

angularjs $location.path仅在第二次单击时更新URL

angularjs $location.path仅在第二次单击时更新URL

我正在处理的网站有一个自定义CMS,我正在使用 angularjs进行内联页面编辑.数据库存储用于生成页面的 HTML,因此我无法严格使用客户端模板和模型.

我没有使用HTML5 pushState,因此URL类似于example.com/page#/widget/1/edit或example.com/page#/widget/new,我当前的问题是当我提交表单进行编辑时一个小部件或添加一个小部件,然后我希望页面通过将HTML注入DOM并将URL更改为默认值来重新加载其内容,我正在尝试使用$location.path(‘/’).

我当前的实现有多个问题(您将在演示中看到),其中一个是在我的表单submit()回调中,更改$location.path只更改第二个表单按钮单击时的URL.我也尝试更改单击“删除”的URL,但这也不起作用.

http://jsfiddle.net/sZrer/1

customPage.controller('PageEditCtrl',function($scope,$http,$routeParams,$location,$route,$compile,PageState) {
    var widgetId = $routeParams.id || widgetCount + 1;

    $scope.pageState = PageState;
    $scope.widget = { id: widgetId,name: 'Widget ' + widgetId };
    $scope.submit = function() {
      if ($scope.widget.id > widgetCount) widgetCount += 1;
      setTimeout(function() {
        var element = $compile(genHtml())($scope);
        angular.element('#page-content').html(element);
        $location.path('/');
      },100);
    };
  });

解决方法

setTimeout()与Angular不能很好地混合(Angular使用一个事件循环来检查模型的变化,但是为了能够做到这一点,它必须能够控制你app的所有部分; setTimeout()超出了Angular的控制,当你的应用程序的Angular部分的任何更改在setTimeout-handler中进行时,它通常需要另一个’round’的Angular事件循环才能获取这些更改).

如果用Angular自己的$timeout()替换它(确保也注入它),它会更好(jsfiddle).

AngularJS $routeParams vs $stateParams

AngularJS $routeParams vs $stateParams

有什么区别:
$routeParams and $stateParams

什么时候用什么?

两者都来自不同的路由器模块.您可以使用任何应用程序.

如果使用ngRoute模块,那么应该使用$routeParams
(https://docs.angularjs.org/api/ngRoute).这是由Angular团队提供的.它只有一个ng视图.您无法执行嵌套视图功能.

如果你使用ui-router模块,那么你应该使用$stateParams
(https://github.com/angular-ui/ui-router).这是从贡献的模块.它具有比ngRoute更多的附加功能.它支持嵌套视图概念.您可以指定多个ui-view

查看更多:http://www.amasik.com/angularjs-ngroute-vs-ui-router/

我们今天的关于angularjs – 调用$location.search()后更新ui-router中的$stateParamsangularjs调用接口的分享就到这里,谢谢您的阅读,如果想了解更多关于angular-ui-router – 在StateChangeStart中不可用的Angular UI Router state.go参数、AngularJS $location.path(‘/’)不清除search()参数、angularjs $location.path仅在第二次单击时更新URL、AngularJS $routeParams vs $stateParams的相关信息,可以在本站进行搜索。

本文标签: