Question

我正在尝试使用AngularJS应用程序种子并得到一些奇怪的结果。

在view2.html中我有：

<div ng-controller="view_ctrl_2">
    <div id="view2">
        <table class="table table-striped">
            <thead>
                <tr>
                    <td>col1</td>   <td>col2</td>   <td>col3</td>   <td>col4</td>
                </tr>
            </thead>
            <tr ng-repeat="entry in entries">
                <td>{{entry.col1}}</td> <td>{{entry.col2}}</td> <td>{{entry.col3}}</td> <td>{{entry.col4}}</td>
            </tr>
        </table>
    </div>
</div>

在我的controllers.js文件中我有

angular.module('myApp.controllers', [])
    .controller('view_ctrl_2', [function() {
        var entries = [
                { "col1":"val01", "col2":"val02", "col3":"val03", "col4":"val04" },
                { "col1":"val05", "col2":"val06", "col3":"val07", "col4":"val08" },
                { "col1":"val09", "col2":"val10", "col3":"val11", "col4":"val12" }
        ];
    }]);

但是，我没有在页面上获得任何输出。它显示了表格，但ng-repeat没有在其上放置任何行。我的猜测是我错过了与$ scope变量有关的事情？

Answer 1

您需要将entries添加到$ scope：

angular.module('myApp.controllers', [])
    .controller('view_ctrl_2', ['$scope', function($scope) {
        $scope.entries = [
                { "col1":"val01", "col2":"val02", "col3":"val03", "col4":"val04" },
                { "col1":"val05", "col2":"val06", "col3":"val07", "col4":"val08" },
                { "col1":"val09", "col2":"val10", "col3":"val11", "col4":"val12" }
        ];
    }]);

请注意$scope正在注入控制器['$scope', function($scope)...并使用$scope.entries=代替var entries=

进一步说明，需要注入控制器的所有依赖关系。如果您正在进行一些http调用并使用promises，它将如下所示：

 .controller('view_ctrl_2', ['$scope', '$q', '$http', function($scope, $q, $http)

AngularJS中的控制器

1 个答案: