Question

我正在尝试在控制器上创建指令。该指令将创建一个从djangorestframework返回的项目表。

controller.js：

var expensesApp = angular.module('expensesApp', []);

expensesApp.controller('ShoppingListController', ['$scope', '$http', 
    function($scope, $http){

    $http(
        {
            method: 'GET',
            url: '/items/?format=json'
        })
        .success(function(data, status, headers, config) {
            $scope.items = data;
        })
        .error(function(data, status, headers, config) {
    });

}]);

directive.js

angular.module('expensesApp', [])
    .directive('shoppingList', function () {
        return {
            restrict: 'A',
            templateUrl: 'http://localhost:8000/static/angular/partials/shopping-list.html',
            controller: 'ShoppingListController'
        };
    })

指令部分被拉入：

购物-list.html

<table class="table table-striped table-condensed">
    <thead>
        <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>SHOP</th>

        </tr>
    </thead>

    <tbody>
        <tr ng-repeat="item in items">
            <td>[[ item.id ]]</td>
            <td>[[ item.name ]]</td>
            <td>[[ item.shop ]]</td>
        </tr>
    </tbody>
</table>

和我定义应用程序和控制器的主html页面。

items.html

...
<div class="container" ng-app="expensesApp">
        <div class="row">

            <div class="col-md-6" ng-controller="ShoppingListController">
                <div shopping-list></div>
            </div>

        </div>
</div>
...

部分中表格的标题被拉入页面，但是它没有执行$ http并且获取应该构成表格内容的项目。我得到ShoppingListController not a function, got undefined

如果我不将表拆分成指令，那么一切都有效。返回所有项目，我在控制台中看不到错误。

任何人都知道我做错了什么？

Answer 1

创建指令时，您正在重新定义模块。它应该是：

angular.module('expensesApp')
.directive('shoppingList', function () {
    return {
        restrict: 'A',
        templateUrl: 'http://localhost:8000/static/angular/partials/shopping-list.html',
        controller: 'ShoppingListController'
    };
});

如果将数组作为模块方法angular.module('expensesApp', [])的第二个参数传递，则Angular会在其中创建一个没有ShoppingListController控制器的新模块。您应该使用getter语法angular.module('expensesApp')来检索以前创建的模块。

控制器不是一个功能，未定义

1 个答案: