[英]How can I have two $scoped variables in an Angular controller?
我正在創建一個帶有Rails后端的有角度的應用程序,並通過api調用訪問數據庫並接收json對象。 我在定義控制器中的多個作用域變量時遇到麻煩。 我目前正在返回一個可變市場,該市場包含數據庫中的所有市場-這是我的指數。 我還試圖進入顯示頁面的單一市場,這就是我遇到的麻煩。 最初,我有2個單獨的控制器,它們正常工作,但似乎不正確。
謝謝!
路線:
angular.module('farmCart', ['ui.router', 'templates'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home/_home.html',
controller: 'mainCtrl',
})
.state('markets', {
url: '/markets',
templateUrl: 'markets/_markets.html',
controller: 'marketsCtrl',
resolve: {
marketsPromise: ['markets', function(markets) {
return markets.getAll();
},
],
},
})
.state('market', {
url: '/markets/{id}',
templateUrl: 'markets/_market.html',
controller: 'marketsCtrl',
resolve: {
market: ['$stateParams', 'markets', function($stateParams, markets) {
return markets.get($stateParams.id);
},
],
},
})
.state('booths', {
url: '/booths/{id}',
templateUrl: 'booths/_booths.html',
controller: 'boothsCtrl',
resolve: {
booth: ['$stateParams', 'booths', function($stateParams, booths) {
return booths.get($stateParams.id);
},
],
},
});
$urlRouterProvider.otherwise('home');
},
]);
市場工廠:
angular.module('farmCart')
.factory('markets', [
'$http',
function($http) {
var o = {
markets: [],
};
o.getAll = function() {
return $http.get('/markets.json').success(function(data) {
angular.copy(data, o.markets);
});
};
o.get = function(id) {
return $http.get('/markets/' + id + '.json').then(function(res) {
return res.data;
});
};
return o;
},
]);
市場總監:
angular.module('farmCart')
.controller('marketsCtrl', [
'$scope',
'markets',
function($scope, markets) {
$scope.markets = markets.markets;
$scope.market = markets.markets.id;
},
]);
您的解決方案名為marketsPromise
和market
,您實際上沒有將其注入到控制器中。 我建議您使用兩個控制器,因為這兩個狀態似乎有不同的用途。
angular.module('farmCart')
.controller('marketsCtrl', [
'$scope',
'marketsPromise',
function($scope, marketsPromise) {
$scope.markets = marketsPromise;
},
]);
angular.module('farmCart')
.controller('marketCtrl', [
'$scope',
'market',
function($scope, market) {
$scope.market = market;
},
]);
此外,您可能需要重新考慮marketsPromise
解決方案的名稱,因為ui-router會注入數據本身而不是promise,這可能會導致混亂。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.