angular-ui-router | 易学教程

Angular ui-router : Parent & Child Views

阅读更多关于 Angular ui-router : Parent & Child Views

问题 I want to build a site with the following structure header-view, main-view, footer-view . So I defined a root route which contains the header & footer. Children of root will be all my sites.Within these sites I will have more nested views. In the code below it does show the header, but not the footer & the main view. As soon as I remove the parent inheritance, it shows the main view but not the header & the footer. HTML <body ng-app="App"> <header ui-view="header"></header> <main ui-view></ui

How to see what states are configured in AngularJS / UI-Router?

阅读更多关于 How to see what states are configured in AngularJS / UI-Router?

问题 Is there a way to see all of the states that have been set on $stateProvider ? In this case, I would like my state assignments to be distributed across many files. I would like to inspect the built states on run or config in a different file. For example: # component1.coffee angular.module('zoo').config ($stateProvider) -> $stateProvider.state 'component1', url: '/component1' template: _template controller: 'Component1Ctrl' # component2.coffee angular.module('zoo').config ($stateProvider) ->

jQuery scrollTop() returns 0 for all elements

阅读更多关于 jQuery scrollTop() returns 0 for all elements

问题 At my job we have a one page site I created with AngularJS. We're using the ui-router plugin (version 0.2.0). Recently I've noticed that when moving from one state to another, the window isn't scrolled to the top. I even tried to scroll it to the top manually using jQuery's scrollTop() function on every state change (using the $stateChangeSuccess event). But it didn't work. So I started investigating, and I've noticed that scrollTop() is returning 0 for every element on the page. Not only

AngularJS / ui-router: $state.go does not work inside ng-click

阅读更多关于 AngularJS / ui-router: $state.go does not work inside ng-click

问题 I have a view where I have the following code: <input type="button" value="New Post" ng-click="$state.go('blog.new-post')"> The goal is to transition to a new state without having to use href. Unfortunately the code above just does not fire. I also tried to include $state in the controller for this view: app.controller('blogPostsController', function($scope, $stateParams, $http, $state) ... But still nothing. transictionTo also does not seem to work. Anyone has any idea on how to make this

AngularJS - Angular UI-Router reload only nested view, not parent

阅读更多关于 AngularJS - Angular UI-Router reload only nested view, not parent

问题 I know this is rather long, but I need to provide some context before my main question. I am creating a page that will be split into two columns. Here is the ui-router code: $urlRouterProvider.otherwise("/projects/edit") $stateProvider .state('projects', { url: "/projects", template: "<div ui-view></div>" }) .state('projects.edit', { resolve: { test: function(){ console.log('projects.edit resolve called') } }, url: "/edit", templateUrl: "projects.html", controller: function($scope, $state){

angular ui.router ui-sref replace url characters - beautify

阅读更多关于 angular ui.router ui-sref replace url characters - beautify

问题 I'm searching for a possibility to replace characters in the ui-sref, respecting the URL of a target. .state('base.product.detail', { url: 'detail/:productName-:productId/' The URLs now look like: Now: http://localhost/detail/My%20Product%20Name-123456789/ Should: http://localhost/detail/My-Product-Name-123456789/ I want to get rid of the %20 (which are also directly generated inside ui-sref="") and replace them with a minus (-). Any ideas how to do that? Regards, Markus 回答1: Register a

testing angularjs ui-router go() method

阅读更多关于 testing angularjs ui-router go() method

问题 I have a controller which gets a value from $scope and sends it to a different state: controllers.controller('SearchController', ['$scope', '$state', '$stateParams', function($scope, $state, $stateParams) { $scope.search = function() { $stateParams.query = $scope.keyword; $state.go('search', $stateParams); }; }]); I am unsure how to go about unit testing this search method. How can I either verify that the go method has been called or do some sort of when($state.go('search', $stateParams))

$route.reload() does not work with ui-router

阅读更多关于 $route.reload() does not work with ui-router

问题 I've switched to to ui-router. Everything went smoothly, except one thing. On my page I have a select that changes the context of the application. Anyway, previously, when this context was changed I was executing this code (in particular, set method): 'use strict'; angular.module('main').factory('lacContext', ['$route', function ($route) { return { set: function (id) { sessionStorage.setItem("lac-context", id); $route.reload(); }, get: function () { return sessionStorage.getItem("lac-context"

AngularJS UI router: How to configure nested named views?

阅读更多关于 AngularJS UI router: How to configure nested named views?

问题 I have a configuration like below: ... .state('profiles', { abstract: true , url : '/profiles' , resolve: {...} , views: { mainModule: { templateUrl : '/partials/home.html' , controller : 'HomeCtrl' } , leftSidePaneModule: { templateUrl : '/partials/leftSidePane.html' , controller : 'LeftSidePaneCtrl' } } }) ... Main Jade File ... .col-xs-4.col-md-4.chat_block(ui-view='leftSidePaneModule', autoscroll="false") ... So, leftSidePaneModule module gets populated in to ui-view='leftSidePaneModule'

Dynamic body class with Angular UI-Router

阅读更多关于 Dynamic body class with Angular UI-Router

问题 I'm trying to find an elegant way to have a custom dynamically class of the body tag that I can set easily from the ui-router configurations and if none is set, I can use a default option or none. Example: routes.js $stateProvider .state('login', { url: "/login", template: 'Login' }) .state('register', { url: "/register", template: 'Register' }). .state('profile', { url: "/profile", template: 'Profile' });; Simple markup HTML <html> <body class="">  <div ui