AngularJS .then在promise->无法读取然后为null / undefined的属性

时间:2018-07-03 06:55:25

标签: angularjs angularjs-directive promise

我对指令和.then方法有疑问。
这是我的控制器代码(我将其用于将变量传递给指令):

angular
    .module('thermofluor')
    .controller('ExperimentsController', ExperimentsController)


    ExperimentsController.$inject = ['$state', '$stateParams', 'PlatesService', '$timeout', '$q', '$scope'];

    function ExperimentsController($state, $stateParams, PlatesService, $timeout, $q, $scope) {
    var exp = this;
    //console.log($stateParams);
    exp.barcode = $stateParams.barcode;
    exp.plate = $stateParams.plate;
    exp.current_user = "";
    exp.users = [];
    exp.curves = [];
    exp.summary = [];
    exp.selected_wells = [];

    // liste experiments
    console.log($stateParams.id);
    getPlateById($stateParams.id);

    function getUsers()
    {
        $timeout(function() {
            exp.users = PlatesService.customShow(exp.plate.id, "users")
                .then(getUsers)
                .catch(getUsersFailed);

            function getUsers ( data ) {
                exp.users = data[0];
                return exp.users;
            }

            function getUsersFailed ( e ) {
                var newMessage = 'Failed To Retrieve the users';
                if (e.data && e.data.description) {
                    newMessage = newMessage + '\n' + e.data.description;
                }
                console.log( e );
                e.data = newMessage;
                return $q.reject(e);
            }

        });
    }

    function getPlateById(id)
    {
        $timeout(function() {
            exp.plate = PlatesService.show(id)
                .then(getPlate)
                .catch(getPlateFailed);

            function getPlate ( data ) {
                exp.plate = data;
                exp.curves[exp.plate.experiments[0].well] = [exp.plate.experiments[0].points, exp.plate.experiments[0].tm];
                getUsers();
                return exp.plate;
            }

            function getPlateFailed ( e ) {
                var newMessage = 'Failed To Retrieve the plate';
                if (e.data && e.data.description) {
                    newMessage = newMessage + '\n' + e.data.description;
                }
                console.log( e );
                e.data = newMessage;
                return $q.reject(e);
            }
        });
    }
}

1-我有一个简单的指令:

angular
    .module('thermofluor')
    .directive('legend', legend)

    legend.$inject = ['$timeout', '$q'];

    function legend($timeout, $q) {
    var directive = {
        link: link,
        restrict: 'E',
        templateUrl: '/crims/thermofluor/experiments/legend.html',
        scope: {
            selected_wells: '=',
            current_user: '=',
            plate: '='
        }
    };

    return directive;

    function link(scope, element) {
        console.log("TESTT");
        console.log(scope);

        scope.plate.then(function (res) {
           console.log(scope.selected_wells);
        });
    }
}

我不明白的是为什么selected_wellscurrent_user为空,而印版也不为空。还有为什么有时我会遇到以下两个错误之一:

TypeError: Cannot read property 'then' of null
TypeError: Cannot read property 'then' of undefined

我认为这是因为板尚未加载(通过ajax调用已加载),但不是.then的实用程序在对象加载后启动该函数?

编辑:

这是PlateService(我使用矩形):

angular.module('thermofluor')
.factory( 'PlatesService', PlatesService);

PlatesService.$inject = ['Restangular', 'RepositoryService', '$cacheFactory', 'tmConfig', 'tmCache'];


function PlatesService( Restangular, RepositoryService, $cacheFactory, tmConfig, tmCache )
{
RepositoryService.extend( PlatesService )

return new PlatesService();

function PlatesService()
{
    var service = this;
    var cache = tmCache.plates();

    //Restangular.setDefaultRequestParams({api_token: ChiefService.getCurrentToken()});

    RepositoryService.call(service, Restangular.withConfig( config ), 'plates',  cache );

    return service;


    function config( RestangularConfigurer )
    {
        Restangular.setDefaultHttpFields({cache: cache});

        return RestangularConfigurer.setBaseUrl(tmConfig.api);
    }

}

}

此Plateservice使用此RepositoryService

function RepositoryService( $cacheFactory)
{

RepositoryService.prototype = {
    all:all,
    filterAll:filterAll,
    show:show,
    customShow:customShow,
    store:store,
    update:update,
    destroy:destroy,
    restore:restore,
};

RepositoryService.extend = function (repository) {
    repository.prototype = Object.create(RepositoryService.prototype);
    repository.prototype.constructor = repository;
};

return RepositoryService;

function RepositoryService(restangular, route, cache)
{
    console.log( cache );
    this.restangular = restangular;
    this.route = route;
    this.cache = cache;

}

function all()
{
    return this.restangular.all(this.route).getList();
}

function filterAll( filters )
{
    return this.restangular.all(this.route).customGETLIST('', filters );
}

function show(uuid)
{
    return this.restangular.one(this.route, uuid ).get();
}

function customShow(uuid, extend)
{
    return this.restangular.one(this.route, uuid).customGET( extend );
}

function store( resource )
{
    clear( this.cache );
    return this.restangular.all(this.route).post( resource );
}

function update( resource )
{
    clear( this.cache );
    return this.restangular.one(this.route, resource.uuid).customPUT( resource );
}

function destroy( resource )
{
    clear( this.cache );
    return this.restangular.one(this.route, resource.uuid).remove();
}

function restore( resource )
{
    clear( this.cache );
    return this.restangular.all(this.route + '/' + resource.uuid + '/restore' ).post();
}

function clear( cache )
{
   if(_.isUndefined( cache )) {
       return;
   }
   cache.removeAll();
}

}

0 个答案:

没有答案