为什么更改视图时将Angularjs物料卡推到内容下方？

Question

I have a page that when visited after a view change, the content is being added to the bottom of the page instead of the view being repopulated with the new content. This is only occurring on this on page with the AngularJS Material Design Directives specifically the cards. All other directives work without hesitation. If the directives are removed from this page then the view will change state without the content being added to the bottom of the page as it should.

I also get the following error on my directory page: error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Is there another way I need to write this service to prevent this from happening? Is this the reason for my directory page being pushed to the bottom of another page?

An example of what this looks like can be found here: https://www.dropbox.com/s/tiohab2dm4gzhcx/angular-issue.png?dl=0

=== DIRECTORY CONTROLLER ===

angular.module('main').controller('directory', ['$scope', 'rows',    function($scope, rows){
$scope.imagePath = 'http://lorempixel.com/250/250/business/'; 
$scope.people = [
    {
        name: 'asdfasdf',
        dept: 'asdf',
        desc: 'asdfasdf',
        phone: '33333333',
        email: 'adsfasdf@asdf.com',
        photo: 'something.jpg'
    }
$scope.chunked = function(){
    return rows($scope.people, 3); 
}

=== ROWS SERVICE ===

angular.module('main').factory('rows', function()
{
    return function(objects, num)
    {
        var newArr = [];
       for (var i=0; i<objects.length; i+=num) {
        newArr.push(objects.slice(i, i+num));
       }
       return newArr;
    }
});

=== HTML ===

<div class="container-fluid">
  <div class="container" ng-controller="directory" id="directory">
  <h1>Directory</h1>
  <div class="row" ng-repeat="people in chunked()">
  <div class="col-sm-4" ng-repeat="person in people">
  <md-card md-theme="{{ showDarkTheme ? 'dark-purple' : 'default' }}" md-theme-watch="">
  <md-card-title>
  <md-card-title-text>
    <span class="md-headline">{{person.name}}</span>
    <span class="md-subhead">{{person.dept}}</span>
    <span class="md-subhead">{{person.desc}}</span>
    </md-card-title-text>
    </md-card-title>
    <md-card-actions layout="row" layout-align="end center">
        <md-button class="md-fab md-mini md-primary" aria-label="Favorite" href="mailto: {{person.phone}}">
            <md-icon class="material-icons">phone</md-icon>
        </md-button>
        <md-button class="md-fab md-mini md-primary" aria-label="Settings" href="mailto: {{person.email}}">
            <md-icon class="material-icons">email</md-icon>
        </md-button>
        </md-card-actions>
        </md-card>
      </div>
    </div>
  </div>
</div>

=== ROUTES ===

angular.module('main').config(['$routeProvider',
function($routeProvider)
{
    $routeProvider.
    when('/:paramB',
    {
        templateUrl: function(params)
        {
            params.paramB = params.paramB.replace(':', '');
            return "/pages/" + params.paramB;

        }
    }).when('/', {
            templateUrl: function(){
                return '/home.asp'
            }
    })
}
]);

Answer 1

Try returning an object from your factory, rather than a function, like so:

angular.module('main').factory('rows', function()
{
    return {
        calculate: function(objects, num)
        {
            var newArr = [];
           for (var i=0; i<objects.length; i+=num) {
                newArr.push(objects.slice(i, i+num));
           }
           return newArr;
        }
    };
});

Then use it like this: return rows.calculate($scope.people, 3);

Answer 2

This was indeed an issue with ng-repeat. If there is a iterator warning then this can effect the view state. The solution for this was to prevent this error by utilizing the following. This is the long way, outside of creating a factory/service, however this satisfies Angular.

<div class="row" ng-repeat="person in people" ng-if="$index % 3 == 0">
  <div class="col-sm-4">{{people[$index].name}}</div>
  <div class="col-sm-4">{{people[$index + 1].name}}</div>
  <div class="col-sm-4">{{people[$index + 2].name}}</div>
</div>