Question

第二次打开这个帖子;最后有很多答案，但没有人给出实际的答案。我的代码仍然没有工作，我开始认为发生了一些非常愚蠢的事情，或者Angular的工作不正常。

这是我的DOM，我通过指令添加：

<form ng-controller="controlFormulario as formCtrl">
  <div style="width:50%; margin-left: 160px; margin-top: 2%">
    <div class="form-group">
      <label for="inputTitulo">Título</label>
      <input type="titulo" class="form-control" id="inputTitulo" ng-model="formCtrl.formulario.titulo">
    </div>
    <div class="form-group">
      <label for="inputTexto">Texto</label>
      <textarea class="form-control" id="inputTexto" ng-model="formCtrl.formulario.texto"></textarea>
    </div>
    <div class="form-group">
      <label for="fecha">Fecha</label>
      <input type="fecha" class="form-control" id="fecha" ng-model="formCtrl.formulario.fecha" disabled>
    </div>
    <div class="form-group" >
      <button ng-model="isDisabled" class="btn btn-primary" style="height:35px;width:100px;float:right;" ng-init="formCtrl.formulario.isDisabled = true" id="submit"
      ng-disabled="isDisabled">
      Enviar
      </button>
    </div>
  </div>
</form>

这些是控制器和指令：

var app = angular.module('app', []);


app.controller('controlFormulario', ['$scope', function($scope) {
  var cf = this;
  cf.formulario = [];
  cf.formulario.fecha = new Date();

  if(cf.formulario.texto != "" && cf.formulario.titulo != ""){
    $scope.isDisabled = false;
  } else {
    $scope.isDisabled = true;
  }
}]);

app.directive('formulario', [function() {
  return {
    restrict: 'E', // C: class, E: element, M: comments, A: attributes
    templateUrl: 'modules/formulario.html',
    controller: 'controlFormulario'
  };
}]);

我正在尝试的事情很简单？当文本和作者输入上有一些文本时，它只是使按钮处于活动状态。你知道，非常简单明了。好吧，没有任何工作。

尝试将正常的ng模型绑定到先前编写的控制器变量，例如formCtrl.isDisabled。没用。
尝试使用$ scope（就像现在一样）并将ng-disabled属性绑定到$ scope.isDisabled变量。没用。
尝试使用普通表达式编写“禁用”规则。不是一个优雅的修复，但它可以工作......很糟糕它也没有。

我因为不能做这么容易的事情而感到有些沮丧，所以我想我需要你的一些帮助来找出我失败的地方！

Answer 1

好吧，在实例化控制器时，您初始化$scope.isDisabled一次，之后再也不会更改它。因此，它自然会永远保持相同的价值。

更改

ng-disabled="isDisabled"

到

ng-disabled="isDisabled()"

并将以下函数添加到范围：

$scope.isDisabled = function() {
    return cf.formulario.texto == "" || cf.formulario.titulo == "";
}

另请注意，您为每个指令实例实例化控制器两次：

因为指令有

controller: 'controlFormulario'

一次，因为模板有

ng-controller="controlFormulario as formCtrl"

你应该使用其中一个，但不能两个都使用。

Answer 2

您是否尝试使用ng-class：

<div ng-class="isDisabled ? 'class to Disabled':''">

我希望它会帮助你。

Answer 3

如果您尚未测试，可以试试这个：对于Dom：

<button ng-model="isDisabled" class="btn btn-primary" style="height:35px;width:100px;float:right;" ng-init="formCtrl.formulario.isDisabled = true" id="submit"
  ng-disabled="FuncIsDisabled()">

在控制器中你可以做这样的事情：

 function FuncIsDisabled(){
     if(cf.formulario.texto != "" && cf.formulario.titulo != ""){
         $scope.isDisabled = false;
     } else {
         $scope.isDisabled = true;
     }
     return $scope.isDisabled;// I'm not sure that this row is mandatory with the scope management
 }

Button永远不会被禁用

3 个答案: