为什么 Angularjs Material 卡片在视图更改时被推到内容下方？

Question

我有一个页面，在视图更改后访问时，内容被添加到页面底部，而不是用新内容重新填充视图。这仅发生在带有 AngularJS Material 设计指令特别是卡片的页面上。所有其他指令都可以毫不犹豫地工作。如果指令从此页面中删除，则视图将更改状态，而内容不会按应有的方式添加到页面底部。

我的目录页面上也出现以下错误：错误：[$rootScope:infdig] 10 $digest() iterations reached。中止！我是否需要另一种方式来编写此服务以防止这种情况发生？这是我的目录页面被推到另一个页面底部的原因吗？

可以在此处找到它的示例：https://www.dropbox.com/s/tiohab2dm4gzhcx/angular-issue.png?dl=0

===目录控制器===

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

=== 行服务 ===

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>

===路线===

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

尝试从您的工厂返回对象，而不是函数，如下所示：

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

然后像这样使用它：return rows.calculate($scope.people, 3);

Answer 2

这确实是 ng-repeat 的问题。如果有迭代器警告，那么这会影响视图状态。解决方案是通过利用以下内容来防止此错误。除了创建 factory/service 之外，这是很长的路要走，但是这满足 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>

为什么 Angularjs Material 卡片在视图更改时被推到内容下方？

Why are the Angularjs Material Cards being pushed below the content on a view change?

javascript

angularjs

angular-material