Angularjs:scope.data 在指令中未定义

Question

首先，我从这个话题中找到了 api 地址:
Laravel 4 and Angular JS and Twitter Bootstrap 3 Pagination

现在我正在解决这个问题，我的小脚本是这样的:

var app = angular.module('kategori', [
        'ngResource',
        'apiBaseRoute'
    ]);

    app.factory('Data', ['$resource', 'apiBaseRoute', function($resource, config){
        return $resource('http://develop.alexei.me/careers/careers.php?callback=JSON_CALLBACK&page=:page', {
            page: 1
        }, {
            'get': {
                method: 'JSONP'
            }
        });
    }]);

    app.controller('KategoriListCtrl', function($scope, Data){

        $scope.init = function() {
          Data.get({}, function(response){
              $scope.kategoriList = response.careers;


          },function(error){
              console.log("HATA VAR" + error);
          });
        };

    });

    app.directive('paginate', function(){
        return{
            scope:{ allData: '=paginate2' },
            link: function(scope){
                console.log(scope);
            }
        }
    });

这是 html 方面:

                <div class="col-md-6 col-md-offset-3" ng-controller="KategoriListCtrl" ng-init="init()">
                {{kategoriList}}
                <div paginate paginate2="kategoriList"></div>
            </div>

如您所见，console.log(scope) 指令在控制台中显示了很多内容，尤其是我在那里看到 allData 有很多数据，但是如果我将其更改为

console.log(scope.allData)

它打印未定义..

我不明白为什么。我该如何解决这个问题？谢谢。

Answer 1

当 JS 到达您的 console.log 时allData属性未定义(因为 kategoriList 未定义)。 kategoriList (因此 allData )在稍后异步创建(并填充大量数据)。

那么，为什么在登录scope时会看到数据？对象？

在记录对象时，它没有属性 allData (并且没有数据)。
但是当您转到控制台并展开节点并查找 allData 时属性，该属性已由您的 AJAX 调用添加和填充(使用 $resource)。

不清楚你想用 allData 做什么.
如果你想在例如使用它ng-repeat你不必担心:你可以正常使用它(就像它被定义一样)，Angular 会在它到达时自动“捡起”并做一些事情。
然而，如果你想(出于你自己神秘的原因)在它准备好时得到通知，你可以使用 $watch :

scope.$watch('allData', function(newValue) {
    if (newValue !== undefined) {
        console.log(scope.allData);
    }
});

另见此 short demo .