禁用jQuery的按键采用AngularJS和表单验证 [英] Disable jQuery Button with AngularJS and Form Validation

问题描述

我想基于表单验证禁用我的jQuery按钮。根据文档，这是用语法如常规按钮很容易：

 ＆LT;按钮NG点击=保存（用户）NG残疾=$形式无效。＆GT;保存＆LT; /按钮＆GT;
 

不过，换一个jQuery UI的按钮时，这个不再有效。我认为角有没有真正的jQuery UI的和AngularJS，因此之间的结合将需要一个指令执行以下操作：

  $（按钮）.button（选项，已禁用）;
 

时的情况下还是有其他的选择吗？什么我试图做的jsfiddle是在这里： http://jsfiddle.net/blakewell/vbMnN/

我的code是这样的：

查看

 ＆LT; D​​IV NG-NG应用程序控制器=MyCtrl＆GT;
    ＆LT;表格名称=形式的novalidate类=我型＆GT;
        名称：＆LT;输入类型=文本NG模型=user.name必需/＆GT;＆LT; BR /＆GT;
        电子邮件：＆LT;输入类型=文本NG模型=user.email要求/＆GT;＆LT; BR /＆GT;
        ＆LT;按钮NG点击=保存（用户）NG残疾=$形式无效。＆GT;保存＆LT; /按钮＆GT;
    ＆LT; /表及GT;
＆LT; / DIV＆GT;
 

控制器

 函数MyCtrl（$范围）{
    $ scope.save =功能（用户）{
        的console.log（user.name）;
    };    $ scope.user = {};};$（函数（）{
    $（按钮）按钮（）。
}）;
 

解决方案

好与角度，你应该的事情要做出指令以应用jQuery插件。

所以在这里你可以这样：

  //注意：默认情况下指令要基于属性的。app.directive（'jqButton'，{
   链接：功能（范围，ELEM，ATTR）{
      //设置您的按钮。
      elem.button（）;      无论是传递到JQ-按钮disabled属性//腕表
      //并使用该值来切换禁止状态。
      范围。$腕表（attr.jqButtonDisabled，功能（价值）{
         $（按钮）.button（选项，禁用，值）;
      }）;
   }
}）;
 

，然后在标记

 ＆LT;按钮JQ-按钮JQ-按钮禁用=myForm会$无效。NG点击=doWhatever（）＆gt;我的按钮和LT; /按钮＆GT;
 

I would like to disable my jQuery button based on form validation. According to the docs this is fairly easy with regular buttons using syntax such as:

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

However, when changing to a jQuery UI button this no longer works. I assume that Angular has no real binding between jQuery UI and AngularJS and thus would require a directive to do the following:

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

Is that the case or are there other alternatives? A jsFiddle of what I'm trying to do is here: http://jsfiddle.net/blakewell/vbMnN/.

My code looks like this:

View

<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>

Controller

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

    $scope.user = {};

};

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

解决方案

Well the thing is with angular, you're supposed to be making directives to apply your JQuery plugins.

So here you could to this:

//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 );
      });
   }
});

and then in markup

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

这篇关于禁用jQuery的按键采用AngularJS和表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！