在AngularJS控制器

Question

I'm trying to use the AngularJS app seed and am getting some odd results.

In view2.html I have:

<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>

and in my controllers.js file I have

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" }
        ];
    }]);

However, I'm not getting any output on the page. It shows the table, but the ng-repeat isn't putting any rows on it. My guess is that I'm missing something to do with the $scope variable?

Answer 1

You need to add entries to the $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" }
        ];
    }]);

Please note that $scope is being injected to the controller ['$scope', function($scope)... and the use of $scope.entries= instead of var entries=

To further elaborate, all dependencies for the controller need to be injected. If you were making some http calls and using promises it would look like this:

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