ng-click 异步后用函数更新 ngclass答案

【问题标题】：Update ng-class with function later ng-click asyncronousng-click 异步后用函数更新 ngclass
【发布时间】：2015-04-07 23:32:54
【问题描述】：

稍后更新 ng-class 功能 ng-click asyncronous。我无法调用函数 $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;
});

【问题讨论】：

使用 $scope 变量来反映这一点。在您的异步调用中，更新 $scope.variable 值，它将更改 css

标签： angularjs angularjs-factory

【解决方案1】：

您必须触发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.
   }

DEMO

【讨论】：