$stateparams 在服务中没有改变,即使它在工厂外改变
$stateparams is not changing in the services Even if it changes outside the factory
var routerApp = angular.module('routerApp', ['ui.router','ngResource']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// HOME STATES AND NESTED VIEWS
.state('partyDetail', {
url: '/party/:partyID',
templateUrl: 'hello.html',
controller: function($scope, $stateParams, UserFactory) {
$scope.id = $stateParams.partyID;
console.log($stateParams.partyID);
UserFactory.get({}, function (userFactory){
$scope.userdata = userFactory.user;
});
}
});
});
routerApp.controller('chappy',[function(){
var thisOne=this;
thisOne.note=[
{id:1,Name:'emp.json',Status:false},
{id:2,Name:'1',Status:true},
{id:3, Name:'2',Status:false}
];
console.log("I'm in controller");
}]);
routerApp.factory('UserFactory', function ($resource,$stateParams) {
console.log($stateParams.partyID);
return $resource(':Id',{Id: $stateParams.partyID }, {
query: {
method: 'GET',
params: {},
isArray: true
}
})
});
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app to our site -->
<body ng-app="routerApp">
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation" ng-controller="chappy as chappu">
<ul class="nav navbar-nav" ng-repeat="result in chappu.note">
<li><a ui-sref="partyDetail({ partyID: result.Name })" ><span ng-bind="result.Name"></span></a></li>
</ul>
</nav>
<!-- MAIN CONTENT -->
<div class="container">
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div ui-view></div>
</div>
</body>
</html>
<!--partial html which is needed to be included in the ui-view-->
<!--hello.html-->
<div>
<p > what were you saying <span ng-bind="id"></span></p>
<p ng-repeat="result in userdata">
<span ng-bind="result.subject"></span>
</p>
</div>
我在这里创建了一个 DemoApp,其中我根据来自不同控制器的数据动态创建了 URi
程序乍一看似乎工作正常,但它有一个问题,$stateparams 甚至在更改之后但在 URi 中它保持不变
这里的问题是我的非服务可能再次被调用
但我没能遇到这个错误
var routerApp = angular.module('routerApp', ['ui.router','ngResource']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// HOME STATES AND NESTED VIEWS
.state('partyDetail', {
url: '/party/:partyID',
Console输出很明显Uri和第一次取数据一样
很明显,要么工厂没有再次被调用,要么 $stateparams 没有改变
感谢帮助
我已经对代码进行了一些调试,我发现因为我直接在工厂中注入 $stateparams 这就是为什么它采用它获得的第一个值
为了解决这个问题,我在控制器的 get 请求中包含了 id:$stateparams,它似乎可以工作
controller: function($scope, $stateParams, UserFactory) {
$scope.id = $stateParams.partyID;
UserFactory.get({'Id': $stateParams.partyID}, function (userFactory){
$scope.userdata = userFactory.user;
});
}
就是这样,它会像 whammy
var routerApp = angular.module('routerApp', ['ui.router','ngResource']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// HOME STATES AND NESTED VIEWS
.state('partyDetail', {
url: '/party/:partyID',
templateUrl: 'hello.html',
controller: function($scope, $stateParams, UserFactory) {
$scope.id = $stateParams.partyID;
console.log($stateParams.partyID);
UserFactory.get({}, function (userFactory){
$scope.userdata = userFactory.user;
});
}
});
});
routerApp.controller('chappy',[function(){
var thisOne=this;
thisOne.note=[
{id:1,Name:'emp.json',Status:false},
{id:2,Name:'1',Status:true},
{id:3, Name:'2',Status:false}
];
console.log("I'm in controller");
}]);
routerApp.factory('UserFactory', function ($resource,$stateParams) {
console.log($stateParams.partyID);
return $resource(':Id',{Id: $stateParams.partyID }, {
query: {
method: 'GET',
params: {},
isArray: true
}
})
});
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app to our site -->
<body ng-app="routerApp">
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation" ng-controller="chappy as chappu">
<ul class="nav navbar-nav" ng-repeat="result in chappu.note">
<li><a ui-sref="partyDetail({ partyID: result.Name })" ><span ng-bind="result.Name"></span></a></li>
</ul>
</nav>
<!-- MAIN CONTENT -->
<div class="container">
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div ui-view></div>
</div>
</body>
</html>
<!--partial html which is needed to be included in the ui-view-->
<!--hello.html-->
<div>
<p > what were you saying <span ng-bind="id"></span></p>
<p ng-repeat="result in userdata">
<span ng-bind="result.subject"></span>
</p>
</div>
程序乍一看似乎工作正常,但它有一个问题,$stateparams 甚至在更改之后但在 URi 中它保持不变
这里的问题是我的非服务可能再次被调用 但我没能遇到这个错误
var routerApp = angular.module('routerApp', ['ui.router','ngResource']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// HOME STATES AND NESTED VIEWS
.state('partyDetail', {
url: '/party/:partyID',
Console输出很明显Uri和第一次取数据一样
很明显,要么工厂没有再次被调用,要么 $stateparams 没有改变
感谢帮助
我已经对代码进行了一些调试,我发现因为我直接在工厂中注入 $stateparams 这就是为什么它采用它获得的第一个值 为了解决这个问题,我在控制器的 get 请求中包含了 id:$stateparams,它似乎可以工作
controller: function($scope, $stateParams, UserFactory) {
$scope.id = $stateParams.partyID;
UserFactory.get({'Id': $stateParams.partyID}, function (userFactory){
$scope.userdata = userFactory.user;
});
}
就是这样,它会像 whammy