我正在创建一个带有 Rails 后端的 Angular 应用程序,并通过 api 调用访问数据库并接收 json 对象。我在 Controller 中定义多个作用域变量时遇到问题。我目前正在返回一个变量市场,其中包含数据库中的所有市场 - 这是我的索引。我还试图访问显示页面的单一市场,这就是我遇到麻烦的地方。最初我有两个独立的 Controller ,它们可以工作,但看起来不正确。
谢谢!
路线:
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
,您实际上没有将它们注入(inject)到 Controller 中。我建议您使用两个 Controller ,因为这两个状态似乎有不同的目的。
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 将注入(inject)数据本身,而不是 Promise,这可能会导致困惑。
关于javascript - 如何在 Angular Controller 中拥有两个 $scoped 变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33321336/