Question

首先，我是stackoverflow＆amp;的新手。 angularjs，如果我的问题很糟糕，请原谅我。

对于一个简单的新闻应用程序我正在制作一个带有angularjs的主 - 详细视图，问题：我无法使细节视图工作，master工作正常，链接正确，但后来我无法在detailview中获取json。我不明白我应该如何设置routeParams＆amp;工厂注入细节控制器内部。这就是我所拥有的：

的index.html

    <!doctype html>
<html lang="en" ng-app="test">
<head>
    <meta charset="UTF-8">
    <title>angular master-detail live-data test</title>

</head>
    <body>
        <div class="main"> 

            <div ng-view></div>

        </div> <!--/main-->

        <script src="angular/angular.js"></script>
        <script src="angular/angular-route.js"></script>

        <script src="script/app.js"></script>
        <script src="script/controllers/newsController.js"></script>
        <script src="script/services/newsFactory.js"></script>
        <script src="script/constants.js"></script>

    </body>
</html>

工厂

    (function () {
    'use strict';

    angular.module('test')
        .factory('newsFactory', newsFactory);


    newsFactory.$inject = ['$http', 'GLOBALS'];
    function newsFactory($http, GLOBALS) {
        var factory = {};

        factory.getItems = function () {
            return $http({
                method: 'GET',
                url: GLOBALS.newsUrl
            });
        };
        return factory;
    }   
})();

最后是控制器

 // newsController.js << MASTER
(function () {
    'use strict';


    angular.module('test')
        .controller('newsController', newsController);

    newsController.$inject = ['newsFactory'];
    function newsController(newsFactory) {
        var vm = this;                                  

        newsFactory.getItems()          
            .success(function (items) {
                vm.items = items;
                })
                .error(function (err) {
                    alert('something went wrong!')
                });
    }
})();

// newsController.js << DETAIL
(function () {
    'use strict';

    angular.module('test')
        .controller('newsItemController', newsItemController);

    newsItemController.$inject = ['$routeParams', 'newsFactory'];

    function newsItemController($routeParams, newsFactory) {
        var vm = this,
            id = $routeParams.id;
        vm.item = newsFactory.getItem = function (id) {
            return items[id -1];
        }

    }
})();

我发现问题与routeParams结合工厂的注入有关，但我不知道如何。谢谢你的正手

app.js

var app = angular.module('test', ['ngRoute'])
    .config(moduleConfig);

    moduleConfig.$inject = ['$routeProvider'];

    function moduleConfig($routeProvider) {
        $routeProvider.
        when('/', {
         templateUrl: 'partials/home.html'
        })
        .when('/home', {
          templateUrl: 'partials/home.html'
        })
        .when('/news/:id', {
          templateUrl: 'partials/news.html'//,
        })
        .otherwise({
          redirectTo: '/'  
        })
    }

constants.js

(function () {
    'use strict';

    angular.module('test')
        .constant('GLOBALS', {
                newsUrl: 'data/news.json'
            });
})();

Answer 1

我猜你需要使用$ routeProvider服务配置你的角度模块。我猜你已经在app.js中注册了你的模块，这里没有提供。

在那个js文件中你可以放点东西......

angular.module('test',[ngRoute])
.config(['$routeProvider'function($routeProvider){

           when('/main', {
                    templateUrl: 'main.html',
                    controller: 'newsController'
              }).
           when('/details', {
                    templateUrl: 'details.html',
                    controller: 'newsItemController'
              }).
otherwise({
                    redirectTo: '/main'
                });

}]);

Answer 2

在您的newsItemController中，您正在newsFactory上创建新功能。这显然是错误的，因为您还在items中不存在newsItemController。

您的工厂应该是您持有items的唯一地方，以及您提供访问它们的方法：

(function () {
    'use strict';

    angular.module('test').factory('newsFactory', newsFactory);

    newsFactory.$inject = ['$http', 'GLOBALS'];

    function newsFactory($http, GLOBALS) {
        var newsItems = [];
        return {
            getItems: function () {
                return $http({
                    method: 'GET',
                    url: GLOBALS.newsUrl
                }).success(function (items) {
                    newsItems = items;
                    return newsItems;
                }); 
            },
            getItem: function (id) {
                return newsItems[id];
            }
        };
    }   
})();

您仍然可以在newsController中执行相同的操作，但在newsItemController中您可以致电：

vm.item = newsFactory.getItem(id);

更新：完整NewsItemController

(function () {
    'use strict';

    angular.module('test')
        .controller('newsItemController', newsItemController);

    newsItemController.$inject = ['$routeParams', 'newsFactory'];

    function newsItemController($routeParams, newsFactory) {
        var vm = this;
        var id = $routeParams.id;
        vm.item = newsFactory.getItem(id);
    }
})();

angularjs Master-Detail使用工厂＆amp; routeParams：如何编写detailcontroller

2 个答案: