AngularJS ng-disabled не работает внутри элемента <td>

Question

У меня есть директива атрибута rtpUniqueWeatherSetting, которая применяет $ validator, который проверяет уникальность массива. Вот мнение:

    <form name="newform">
        <div>
          Form is valid: {{newform.$valid}}
        </div>
      <td>
        <input type="submit" ng-disabled="newform.$invalid"
               class="btn btn-primary" ng-click="saveNew()"
               value="Submit" />
        <button class="btn btn-default" ng-click="cancelNew()">Cancel</button>
      </td>
      <td>
        <input required rtp-unique-weather-setting type="number" ng-model="newSetting[fromProp]" name="newSettingFrom" />
      </td>
      <td>
        <input required type="number" ng-model="newSetting[rankProp]" name="newSettingRank" />
      </td>
    </form>

Директива с валидатором

require('./_index')
.directive('rtpUniqueWeatherSetting', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attr, ngModelController) {

      // TODO: REMOVE. FOR DEBUGGING ONLY.
      scope.$watch("newSetting", function() {
        console.log(ngModelController.$validators);
        console.log(ngModelController.$invalid);
      }, true);

      var findSetting = function(fromVal) {
        return scope.denormalizedSettingsObject.settings.find(function(setting) 
{
          return setting.from === fromVal;
        });
      };

      ngModelController.$validators.uniqueSetting = function(modelValue, 
viewValue) {
        var value = modelValue || viewValue;
        var existing = findSetting(value);
        if (existing) {
          console.log('An override starting at ' + value + ' already exists.');
          return false;
        }
        console.log('Overrides are unique.');
        return true;
      };
    }
  };
});

У меня $watch наблюдается nvModelController. $ Invalid prop, и я передаю значение в консоль. Короче говоря, валидатор работает безупречно, а свойство $ invalid устанавливается равным true, когда это необходимо, и наоборот. Однако ng-disabled не работает так, как у меня.

Answer 1

Если вы считаете, что возникла проблема, попробуйте, как показано ниже.

Вместо td используйте div и примените css display: table-cell для этого div

и для выравнивания по центру используйте css

{
    display: table-cell;
    vertical-align: middle;
    text-align: center;

}