Question

我有一个简单的问题，我似乎无法弄明白。我是angular.js的新手，正在尝试使用ui.router。我的Web应用程序是一个显示JSON数据的表。

列是单个JSON对象中的所有键，行是每个相应键的值。我想做类似以下的事情：

go to www.xyz.com/keyname,

并查看keyname的所有值。

然而，我在试图拿到钥匙时陷入困境。

键在控制器中定义，控制器通过工厂传递数据。那时我想我会做这样的事情：

var app = angular.module('SortingTables', ['ui.bootstrap', 'ui.router']);


app.factory('dataTable', function () {
           return tastyJSONData;
      });

app.controller('Ctrl', ['$scope', 'dataTable', function ($scope, dataTable) {
     $scope.dataTable = dataTable;
     $scope.columns = the keys in dataTable;
}]);

app.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {

    // pseudocode

    for every column in $scope.columns in Ctrl
        $stateProvider.state(column)...
}]);

但是，我无法访问包含数据的控制器中的范围。我错过了什么吗？

配置在工厂之前运行，那么如何在配置中访问工厂生成的数据？

Answer 1

我认为最好将所有逻辑保留在控制器中。也许可以采取以下方式：

app.controller('Ctrl', ['$scope', '$stateProvider', 'dataTable', function ($scope, $stateProvider, dataTable) {
   $scope.dataTable = dataTable;
   $scope.columns = the keys in dataTable;

   // pseudocode

   for every column in $scope.columns
       $stateProvider.state(column)...
}]);

然后将配置保留用于路由目的

app.config(['$urlRouterProvider',function ($urlRouterProvider) {

    //routing
}]);

如果没有完整的代码，很难说。希望这有帮助！

Answer 2

我认为定义明确的状态会使事情变得比需要的更难。

尝试这样的事情：

.state('keys', {
    url: '/',
    resolve: {
        keys: ['$http', function($http {
            return $http.get('/api/keys');
        }]
    },
    controller: function($scope, keys) {
        $scope.allKeys = keys;
    }
})

.state('keys.detail', {
    url: '/:keyname',
    controller: function($scope, $stateParams) {
        $scope.keyname = $stateParams.keyname;
    }
})

并且在您的“键”视图中显示如下内容：

<li ng-repeat="keyname in allKeys">
    <a ui-sref="keys.detail({keyname: keyname})">{{ keyname }}</a>
</li>

在Angular中使用$ scope

2 个答案: