角度与Coffeescript:为什么我的方法被执行?

时间:2014-12-15 13:58:31

标签: angularjs coffeescript

我是一个有角度的初学者,来自Ruby我选择使用Coffescript而不是JS。我正在使用ng-classify来定义我的控制器,服务和带有Coffeescript类的Factory,但我无法理解错误。

我在[github repo]中有我的代码,但我试着在这里解释我的问题。

我有这个控制器

class Setting extends Controller
  constructor: (@DataService,$log) ->
    @examType = @DataService.getObject('setting_examtype') || { checked: false }
    @settingList = @DataService.getObject('setting_list') || [
                    { text: 'Dai precedenza a domande sbagliate', checked: false },
                    { text: 'Dai precedenza a domande mai fatte', checked: false },
                    { text: 'Mostra subito la soluzione', checked: false }
                  ]
    @questionPossibility = [10,20,30,40,50]
    @questionNumber = @DataService.get('question_number') ||  30
    return

  examTypeChecked: () =>
    @DataService.setObject('setting_examtype',@examType)
    console.log 'examTypeChecked'
    return

  settingListChecked: () =>
    console.log 'settingListChecked'
    @DataService.setObject('setting_list',@settingList)
    return

  questionNumberChecked: () =>
    console.log 'questionNumberChecked'
    @DataService.set('question_number',@questionNumber)
    return

编译版本为:

(function() {
  var Setting,
    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

  Setting = (function() {
    function Setting(DataService, $log) {
      this.DataService = DataService;
      this.questionNumberChecked = __bind(this.questionNumberChecked, this);
      this.settingListChecked = __bind(this.settingListChecked, this);
      this.examTypeChecked = __bind(this.examTypeChecked, this);
      this.examType = this.DataService.getObject('setting_examtype') || {
        checked: false
      };
      this.settingList = this.DataService.getObject('setting_list') || [
        {
          text: 'Dai precedenza a domande sbagliate',
          checked: false
        }, {
          text: 'Dai precedenza a domande mai fatte',
          checked: false
        }, {
          text: 'Mostra subito la soluzione',
          checked: false
        }
      ];
      this.questionPossibility = [10, 20, 30, 40, 50];
      this.questionNumber = this.DataService.get('question_number') || 30;
      return;
    }

    Setting.prototype.examTypeChecked = function() {
      this.DataService.setObject('setting_examtype', this.examType);
      console.log('examTypeChecked');
    };

    Setting.prototype.settingListChecked = function() {
      console.log('settingListChecked');
      this.DataService.setObject('setting_list', this.settingList);
    };

    Setting.prototype.questionNumberChecked = function() {
      console.log('questionNumberChecked');
      this.DataService.set('question_number', this.questionNumber);
    };

    return Setting;

  })();

  angular.module('app').controller('settingController', ['DataService', '$log', Setting]);

}).call(this);

正如您所看到的,我插入了一些日志语句,并且从控制台我理解我的所有方法都已执行。为什么?为什么要调用examTypeChecked

只有在有人使用切换时才会调用它。

<ion-toggle ng-model="setting.examType" ng-checked="setting.examTypeChecked()" toggle-class="toggle-calm" ng-true-value="oltre" ng-false-value="entro">Tipo di esame</ion-toggle>

1 个答案:

答案 0 :(得分:0)

你弄错了,你的代码很好,代码的使用不是你想象的那样

<ion-toggle ng-model="setting.examType" ng-checked="setting.examTypeChecked()" toggle-class="toggle-calm" ng-true-value="oltre" ng-false-value="entro">Tipo di esame</ion-toggle>
每次触发setting.examTypeChecked()流程时都会调用

$digest(),并且每次更改模型时都会触发$scope.apply()$scope.digest()$timeout(),{{1}}和更多