Question

我正在制作一个rails / angular项目，我试图从Instagram返回一个数据列表。 Rails只是用于提供文件，然后将部署到heroku。应用程序的其余部分是有角度的。

我一直收到错误

参数'MainController'不是函数，未定义

所以我知道它与我的控制器有关。我之前做了几个有角度的项目并让它们工作，我用这个重复了我的步骤，但是这个错误让我发疯了，我似乎无法弄清楚为什么它不断出现，因为我的控制器未定义。

这是我的代码;

app.js

var app = angular.module("hipstagram", ['ngResource']);

资产/ Javascript角/角度/服务/ main.js

    app.factory('instagram', function($resource){
    return {
        fetchPopular: function(callback){

            var api = $resource('https://api.instagram.com/v1/media/popular?client_id=:client_id&callback=JSON_CALLBACK',{
                client_id: 'MY_CLIENT_ID'
            },{
                fetch:{method:'JSONP'}
            });

            api.fetch(function(response){
                callback(response.data);

            });
        }
    }
});

资产/ Javascript角/角度/控制器/ main_ctrl.js

function MainController($scope, instagram){

    $scope.layout = 'grid';

    $scope.pics = [];

    instagram.fetchPopular(function(data){

        $scope.pics = data;
    });

});

index.html.erb

<div ng-app="hipstagram" ng-controller="MainController">

    <div class="bar">
    </div>

    <ul ng-show="layout == 'grid'" class="grid">
        <!-- A view with big photos and no text -->
        <li ng-repeat="p in pics">
            <a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.low_resolution.url}}" /></a>
        </li>
    </ul>

    <ul ng-show="layout == 'list'" class="list">
        <!-- A compact view smaller photos and titles -->
        <li ng-repeat="p in pics">
            <a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.thumbnail.url}}" /></a>
            <p>{{p.caption.text}}</p>
        </li>
    </ul>
</div>

根据我的故障排除，也许angular无法访问主控制器，或者我只是将其命名为错误。如果是这样的话，关于如何通过这个的任何提示都会很棒，我很难过。谢谢您的帮助。

Answer 1

var app = angular.module("hipstagram", ['ngResource']);
app.controller("MainController", ["$scope", "instagram" ,function($scope, instagram){

    $scope.layout = 'grid';

    $scope.pics = [];

    instagram.fetchPopular(function(data){

        $scope.pics = data;
    });

}]);

Answer 2

不要定义全局MainController函数，而是执行以下操作：

app.controller('MainController', function ($scope, instagram){

    $scope.layout = 'grid';

    $scope.pics = [];

    instagram.fetchPopular(function(data){

        $scope.pics = data;
    });

});

使用角度应用程序注册控制器，以便可以使用它并依赖注入。

论证＆＃39;控制器＆＃39;没有定义

2 个答案: