使用AngularJS和表单验证禁用jQuery按钮

Question

我想基于表单验证禁用我的jQuery按钮.根据文档,使用常规按钮使用语法相当容易,例如:

 <button ng-click="save(user)" ng-disabled="form.$invalid">Save</button>

但是,当更改为jQuery UI按钮时,这不再有效.我假设Angular在jQuery UI和AngularJS之间没有真正的绑定,因此需要一个指令来执行以下操作:

$("button" ).button( "option", "disabled" );

是这种情况还是有其他选择？我正在尝试做的事情是:http://jsfiddle.net/blakewell/vbMnN/.

我的代码看起来像这样:

视图

<div ng-app ng-controller="MyCtrl">
    <form name="form" novalidate class="my-form">
        Name: <input type="text" ng-model="user.name" required /><br/>
        Email: <input type="text" ng-model="user.email" required/><br/>
        <button ng-click="save(user)" ng-disabled="form.$invalid">Save</button>
    </form>
</div>

调节器

function MyCtrl($scope) {
    $scope.save = function (user) {
        console.log(user.name);
    };

    $scope.user = {};

};

$(function () {
    $("button").button();
});

Answer 1

好吧,事情是有角度的,你应该制定指令来应用你的JQuery插件.

所以在这里你可以这样:

//NOTE: directives default to be attribute based.

app.directive('jqButton', {
   link: function(scope, elem, attr) {
      //set up your button.
      elem.button();

      //watch whatever is passed into the jq-button-disabled attribute
      // and use that value to toggle the disabled status.
      scope.$watch(attr.jqButtonDisabled, function(value) {
         $("button" ).button( "option", "disabled", value );
      });
   }
});

然后在标记中

<button jq-button jq-button-disabled="myForm.$invalid" ng-click="doWhatever()">My Button</button>