Question

我使用的是AngularJS和MVC 5的1.2.2版本，但是我的服务代码被执行时遇到了问题。

以下是我在_Layout.cshtml文件中的链接

div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home", null, new { @class = "navbar-brand" })</li>
                    <li>@Html.ActionLink("Albums", "Index", "Album")</li>
</ul>
</div>

我的模块看起来像这样

var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
    $routeProvider
        .when('/Home',
            {
                controller: 'HomeController',
                templateUrl: '/Views/Home/Index.cshtml'
            })
        .when('/Album',
            {
                controller: 'AlbumController',
                templateUrl: '/View/Album/Index.cshtml'
            })
        .otherwise({ redirectTo: '/Home' });
});

我的AlbumController看起来像这样

app.controller('AlbumController', function ($scope, albumService) {

    init();

    function init() {
        $scope.albums = albumService.getAlbums();
    }
});

我的albumService看起来像这样

app.service('albumService', function () {
    this.getAlbums = function () {
        return albums;
    };

    var albums = [
        {
            id: 1, Name: 'Foo', AlbumNumber: 1,
            Songs: [
                { Id: 1, Name: 'Bar', AlbumId: 1, TrackNumber: 1 }
            ]
        }
    ];
});

我的View/Album/Index.cshtml看起来像这样：

问题是相册名称未显示在页面上。我做错了什么？

修改

我的ng-app指令位于我的_Layout.cshtml文件中。

<html data-ng-app="myApp">

Answer 1

专辑是一个数组。检查{{albums [0] .Name}}。

Answer 2

使用app.factory而不是app.service

所以

app.factory('albumService', function(){

   return albuns;
});

Angular Service没有被调用

2 个答案: