Question

我得到了这个指令：

.directive('studentTable', [function() {
    return {
        restrict: 'A',
        replace: true,
        scope: {
            students: "=",
            collapsedTableRows: "="
        },
        templateUrl: 'partials/studentTable.html',
        link: function(scope, elem, attrs) {
            ...
        }
    }
}

模板：

  <table class="table">
        <thead>
            <tr>
                <th><b>Name</b></th>
                <th><b>Surname</b></th>
                <th><b>Group</b></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="student in students track by $index">
                <td>{{ student.name }}</td> 
                <td>{{ student.surname }}</td>
                <td>{{ student.group }}</td>
            </tr>
        </tbody>
    </table>

在我的html中使用指令，如下所示：

<div student-table students="students" 
    collapsedTableRows="collapsedTableRows"></div>

父控制器：

.controller('SchoolController', ['$scope', 'User', function($scope, User){
    $scope.students = [];
    $scope.collapsedTableRows = [];

    $scope.search = function(value) {
        if(value) {
            var orgId = $state.params.id;
            var search = User.searchByOrg(orgId, value);

            search.success(function (data) {
                $scope.students = data;
                $scope.collapsedTableRows = [];
                _(data).forEach(function () {
                    $scope.collapsedTableRows.push(true);
                });

            });
        }
    }
}])

现在在beginnig，表是空的，因为学生数组中没有用户。点击搜索后，获取学生对象列表，我将它们放到范围变量中，但是指令没有更新，也没有找到模型中的变化（scope.$watch('students',...）。我错过了什么？

P.S。如果我使用$httpBackend模拟数据，则指令可以正常工作。

Answer 1

您应该尝试以这种方式更改控制器 ...

$scope.$apply(function() {
    $scope.students = data;
})
...

这将启动摘要循环，如果它尚未进行中。另一种形式几乎相同的形式是：

...
$scope.students = data;
$scope.$digest()
...

PS：第一种方法只是在评估函数后执行$ rootScope。$ digest（）的包装器，考虑到$ digest评估当前范围，并且所有在$ rootScope上调用它的孩子都非常沉重。因此，如果第二种方法有效，则应该首选。

Answer 2

请确保数据对象返回学生数组，因为您必须使用data.data，简单的演示应该可以帮助您：

http://plnkr.co/edit/UMHfzD4oSCv27PnD6Y6v?p=preview

 $http.get('studen.json').then(function(students) {

      $scope.students = students.data; //<-students.data here

    },
    function(msg) {
      console.log(msg)
    })

AngularJS：指令在父作用域中的$ http响应后不更新作用域

2 个答案: