我对指令和.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_wells
和current_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();
}
}