Ionic + Angular ui-sref 不生成 href
Ionic + Angular ui-sref not generating href
我正在研究 url 中的参数传递。据我所知,使用 vm.all 属性 设置 baseFilter url 参数的所有设置都是正确的,但每次我单击 link 时都没有任何反应。我还检查了生成的 html,我看到了 ui-sref 而不是 href 标签。感谢任何帮助
router.js
(function () {
'use strict';
angular.module('app').config(routing);
/* @ngInject */
function routing($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home/home.html',
controller: 'HomeContentController as vm'
})
.state('eventsList', {
url: '/eventsList/:baseFilter',
templateUrl: 'events-list/events-list.html',
controller: 'EventsListController as vm'
});
$urlRouterProvider.otherwise('/home');
}
})();
这是我的标签 home.html
<a class="item" ui-sref="eventsList({baseFilter: vm.all})">
HomeController.js
(function () {
'use strict';
angular.module('app').controller('HomeContentController', HomeContentController);
/* @ngInject */
function HomeContentController($scope, $log, $ionicSideMenuDelegate, $ionicPopup, $state, rxEventsService, rxRequests, $cordovaGeolocation) {
// Assign variable `vm` to `this` to reflect that this is a view-model.
var vm = this;
vm.all = "all";
// Bindable Properties
vm.promptUnavailable = promptUnavailable;
// Controller Initialization
function init() {
console.log('init HomeContentController');
}
init();
// Bindable Events
function promptUnavailable(feature) {
$ionicPopup.alert({
title: 'Unavailable Feature',
template: feature + ' is unavailable in this Alpha release'
});
}
}
})();
如果您设置 vm.all
的正确值,您的代码应该可以正常工作。
angular
.module('app', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeContentController as vm'
})
.state('eventsList', {
url: '/eventsList/:baseFilter',
templateUrl: 'events-list.html',
controller: 'EventsListController as vm'
});
$urlRouterProvider.otherwise('/home');
})
.controller('HomeContentController', function () {
var vm = this;
vm.all = 1;
})
.controller('EventsListController', function ($stateParams) {
var vm = this;
console.log($stateParams);
});
我已经使用您的代码创建了一个 JSBin,它运行良好。如果您看到控制台日志中记录的值,它的正确值为 $stateParams
。 https://jsbin.com/qebimeh/1/edit?html,js,console,output
我正在研究 url 中的参数传递。据我所知,使用 vm.all 属性 设置 baseFilter url 参数的所有设置都是正确的,但每次我单击 link 时都没有任何反应。我还检查了生成的 html,我看到了 ui-sref 而不是 href 标签。感谢任何帮助
router.js
(function () {
'use strict';
angular.module('app').config(routing);
/* @ngInject */
function routing($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home/home.html',
controller: 'HomeContentController as vm'
})
.state('eventsList', {
url: '/eventsList/:baseFilter',
templateUrl: 'events-list/events-list.html',
controller: 'EventsListController as vm'
});
$urlRouterProvider.otherwise('/home');
}
})();
这是我的标签 home.html
<a class="item" ui-sref="eventsList({baseFilter: vm.all})">
HomeController.js
(function () {
'use strict';
angular.module('app').controller('HomeContentController', HomeContentController);
/* @ngInject */
function HomeContentController($scope, $log, $ionicSideMenuDelegate, $ionicPopup, $state, rxEventsService, rxRequests, $cordovaGeolocation) {
// Assign variable `vm` to `this` to reflect that this is a view-model.
var vm = this;
vm.all = "all";
// Bindable Properties
vm.promptUnavailable = promptUnavailable;
// Controller Initialization
function init() {
console.log('init HomeContentController');
}
init();
// Bindable Events
function promptUnavailable(feature) {
$ionicPopup.alert({
title: 'Unavailable Feature',
template: feature + ' is unavailable in this Alpha release'
});
}
}
})();
如果您设置 vm.all
的正确值,您的代码应该可以正常工作。
angular
.module('app', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeContentController as vm'
})
.state('eventsList', {
url: '/eventsList/:baseFilter',
templateUrl: 'events-list.html',
controller: 'EventsListController as vm'
});
$urlRouterProvider.otherwise('/home');
})
.controller('HomeContentController', function () {
var vm = this;
vm.all = 1;
})
.controller('EventsListController', function ($stateParams) {
var vm = this;
console.log($stateParams);
});
我已经使用您的代码创建了一个 JSBin,它运行良好。如果您看到控制台日志中记录的值,它的正确值为 $stateParams
。 https://jsbin.com/qebimeh/1/edit?html,js,console,output