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

Question

首先,我从这个主题找到了api地址: Laravel 4和Angular JS以及Twitter Bootstrap 3分页

现在我正在研究这个,我的小脚本是这样的:

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)inside指令在控制台中显示了很多东西,特别是我看到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);
    }
});

另见这个简短的演示.