我怎么能在Angular控制器中有两个$作用域变量呢?

How can I have two $scoped variables in an Angular controller?

本文关键字：两个 作用域 变量 Angular 怎么能 控制器      更新时间：2023-09-26

我正在创建一个带有rails后端的angular应用程序，并通过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会注入数据本身，而不是承诺，这可能会导致混乱。

相关文章：