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

发布时间：2020-12-17 08:52:50 所属栏目：安全来源：网络整理

导读：首先,我从这个主题找到了api地址： Laravel 4 and Angular JS and Twitter Bootstrap 3 Pagination 现在我正在研究这个,我的小脚本是这样的： var app = angular.module('kategori',[ 'ngResource','apiBaseRoute' ]); app.factory('Data',['$resource','api

首先,我从这个主题找到了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)inside指令在控制台中显示了很多东西,特别是我看到allData有很多数据,但是如果我把它改成

console.log(scope.allData)

它打印未定义..

我不明白为什么.我怎么能解决这个问题？谢谢.

当JS到达你的console.log时,allData属性是未定义的(因为kategoriList是未定义的). kategoriList(以及allData)在以后异步创建(并填充大量数据).

那么,为什么在记录范围对象时会看到数据呢？

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

目前尚不清楚你想用allData做什么.
如果你想在例如ng-repeat你不必担心：你可以正常使用它(好像已经定义了),Angular会在它到达时自动“捡起来”并做一些事情.
然而,如果你想(为了你自己的神秘理由)在准备就绪时获得通知,你可以使用$watch：

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

另见,这是short demo.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!