AngularJs ng-disabled在IE 9中无法解决任何问题?

时间:2015-06-26 13:37:46

标签: angularjs cross-browser

我遇到了ng-disabled AngularJs指令的问题,它在Chrome中运行良好,但它在IE 9中不起作用,任何使其工作的解决方案都将受到赞赏。

main.html

<select kendo-drop-down-list k-data-text-field="'text'"
    k-option-label="'Select'" k-data-value-field="'id'"
    k-data-source="assessmentOptions" name="riskAssesLevelLookupCode"
    required id="riskAssesLevelLookupCode"
    maxlength="256"
    ng-attr-disabled="{{disableAssessmentType? 'disabled': ''}}"
    ng-model="riskAssessmentDTO.riskAssesLevelLookupCode"
></select>

1 个答案:

答案 0 :(得分:5)

我目前与ng-disabled有同样的问题。不幸的是,我能想到的唯一解决方法是处理控制器中<select kendo-drop-down-list k-data-text-field="'text'" k-option-label="'Select'" k-data-value-field="'id'" k-data-source="assessmentOptions" name="riskAssesLevelLookupCode" Required id="riskAssesLevelLookupCode" maxlength="256" ng-attr-disabled="checkForDisabled()" ng-model="riskAssessmentDTO.riskAssesLevelLookupCode"> </select> 的逻辑。所以在你的情况下:

checkForDisabled() {
    if(disableAssessmentType) {
       return "disabled";
    } else {
       return "";
    }
}

在控制器中:

ng-click

然后再次,这不会保证IE9上的正确行为。就我而言,我试图避免false事件的功能。因此,当设置了禁用时,我将标志设置为<button ng-click="callMethod()" ng-disabled="checkDisabled()"> Click me if Im enabled </button> ,并根据该标志调用该函数。像这样:

checkDisabled() {
   // Let's say it's disabled
   $scope.isDisabled = false; // set a global flag
   return false;
}

callMethod() {
   if($scope.isDisabled) {
        //disabled, do nothing maybe handle an error?
   } else {
        //functionality when it's enabled
   }
}

控制器:

$("#valForm").validate({

  showErrors: function(errorMap, errorList) {

    // Clean up any tooltips for valid elements
    $.each(this.validElements(), function(index, element) {
      var $element = $(element);

      $element.data("title", "") // Clear the title - there is no error associated anymore
        .removeClass("error")
        .tooltip("destroy");
    });

    // Create new tooltips for invalid elements
    $.each(errorList, function(index, error) {
      var $element = $(error.element);

      $element.tooltip("destroy") // Destroy any pre-existing tooltip so we can repopulate with new tooltip content
        .data("title", error.message)
        .addClass("error")
        .tooltip(); // Create a new tooltip based on the error messsage we just set in the title
    });
  },

  submitHandler: function(form) {
    alert("This is a valid form!");
  }
});

$('#reset').click(function() {
  var validator = $("#valForm").validate();
  validator.resetForm();
});