在 ng-click 异步后用函数更新 ng-class
Update ng-class with function later ng-click asyncronous
更新 ng-class 之后使用 ng-click 异步功能。我无法调用函数 $scope.addedProgram 刷新视图。有什么建议吗?
在视图中,我有一个图标会根据日历上是否已创建事件进行更新
// View
<ons-icon icon="ion-bookmark" size="30px" ng-click="program(paper)" ng-class="addedProgram(paper) ? 'active_bookmark' : 'inactive_bookmark'"></ons-icon>
控制器为 ng-click 和 ng-class
两次调用工厂
// Controller
app.controller('AuthorController', function($scope, ProgramService) {
// Program function()
$scope.program = function(paper) {
ProgramService.saveProgram(paper);
}
// Added Program function()
$scope.addedProgram = function(paper) {
return ProgramService.addedProgram(paper);
}
});
// Factory
app.factory('ProgramService', function($filter, $q) {
var functions = {};
functions.findProgramDevice = function(paper) {
var deferred = $q.defer();
var startDate = new Date(2015, 3, 7, 18, 30, 0, 0, 0);
var endDate = new Date(2015, 3, 7, 19, 30, 0, 0, 0);
var title = "My nice event";
var eventLocation = "Home";
var notes = "Some notes about this event.";
var success = function(message) {
if(message.length > 0){
deferred.resolve(true);
}else{
deferred.resolve(false);
}
};
var error = function(message) { deferred.resolve(false); };
window.plugins.calendar.findEvent(title, eventLocation, notes, startDate, endDate, success, error);
return deferred.promise;
}
functions.saveProgramDevice = function(paper) {
var startDate = new Date(2015, 3, 7, 18, 30, 0, 0, 0);
var endDate = new Date(2015, 3, 7, 19, 30, 0, 0, 0);
var title = "My nice event";
var eventLocation = "Home";
var notes = "Some notes about this event.";
var success = function(message) { alert("Success 2: " + JSON.stringify(message)); };
var error = function(message) { alert("Error 2: " + message); };
functions.findProgramDevice(paper).then(function(result) {
if(result){
window.plugins.calendar.deleteEvent(title,eventLocation,notes,startDate,endDate,success,error);
}else{
window.plugins.calendar.createEvent(title,eventLocation,notes,startDate,endDate,success,error);
}
});
}
functions.saveProgram = function(paper) {
var option = 0;
functions.findProgramDevice(paper).then(function(result) {
var program_exist_device = result;
// Here other code
});
}
functions.addedProgram = function(paper) {
functions.findProgramDevice(paper).then(function(result) {
var program_exist_device = result;
return program_exist_device;
});
}
return functions;
});
您必须触发 ng-init
中的函数并使用 $scope
变量来更新 类。
<ons-icon ng-init="addedProgram(paper)" icon="ion-bookmark" size="30px" ng-class="updateClass ? 'active_bookmark' : 'inactive_bookmark'">Heya</ons-icon>
在你的控制器中:
$scope.addedProgram = function(paper) {
return $timeout(function() {
$scope.updateClass = true;
}, 5000);
// on success of that asyn call update the $scope.updateClass variable.
}
更新 ng-class 之后使用 ng-click 异步功能。我无法调用函数 $scope.addedProgram 刷新视图。有什么建议吗?
在视图中,我有一个图标会根据日历上是否已创建事件进行更新
// View
<ons-icon icon="ion-bookmark" size="30px" ng-click="program(paper)" ng-class="addedProgram(paper) ? 'active_bookmark' : 'inactive_bookmark'"></ons-icon>
控制器为 ng-click 和 ng-class
两次调用工厂 // Controller
app.controller('AuthorController', function($scope, ProgramService) {
// Program function()
$scope.program = function(paper) {
ProgramService.saveProgram(paper);
}
// Added Program function()
$scope.addedProgram = function(paper) {
return ProgramService.addedProgram(paper);
}
});
// Factory
app.factory('ProgramService', function($filter, $q) {
var functions = {};
functions.findProgramDevice = function(paper) {
var deferred = $q.defer();
var startDate = new Date(2015, 3, 7, 18, 30, 0, 0, 0);
var endDate = new Date(2015, 3, 7, 19, 30, 0, 0, 0);
var title = "My nice event";
var eventLocation = "Home";
var notes = "Some notes about this event.";
var success = function(message) {
if(message.length > 0){
deferred.resolve(true);
}else{
deferred.resolve(false);
}
};
var error = function(message) { deferred.resolve(false); };
window.plugins.calendar.findEvent(title, eventLocation, notes, startDate, endDate, success, error);
return deferred.promise;
}
functions.saveProgramDevice = function(paper) {
var startDate = new Date(2015, 3, 7, 18, 30, 0, 0, 0);
var endDate = new Date(2015, 3, 7, 19, 30, 0, 0, 0);
var title = "My nice event";
var eventLocation = "Home";
var notes = "Some notes about this event.";
var success = function(message) { alert("Success 2: " + JSON.stringify(message)); };
var error = function(message) { alert("Error 2: " + message); };
functions.findProgramDevice(paper).then(function(result) {
if(result){
window.plugins.calendar.deleteEvent(title,eventLocation,notes,startDate,endDate,success,error);
}else{
window.plugins.calendar.createEvent(title,eventLocation,notes,startDate,endDate,success,error);
}
});
}
functions.saveProgram = function(paper) {
var option = 0;
functions.findProgramDevice(paper).then(function(result) {
var program_exist_device = result;
// Here other code
});
}
functions.addedProgram = function(paper) {
functions.findProgramDevice(paper).then(function(result) {
var program_exist_device = result;
return program_exist_device;
});
}
return functions;
});
您必须触发 ng-init
中的函数并使用 $scope
变量来更新 类。
<ons-icon ng-init="addedProgram(paper)" icon="ion-bookmark" size="30px" ng-class="updateClass ? 'active_bookmark' : 'inactive_bookmark'">Heya</ons-icon>
在你的控制器中:
$scope.addedProgram = function(paper) {
return $timeout(function() {
$scope.updateClass = true;
}, 5000);
// on success of that asyn call update the $scope.updateClass variable.
}