4

フォームの検証に基づいてjQueryボタンを無効にしたいのですが。ドキュメントによると、これは次のような構文を使用する通常のボタンでかなり簡単です。

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

ただし、jQuery UIボタンに変更すると、これは機能しなくなります。AngularにはjQueryUIとAngularJSの間に実際のバインディングがないため、次のことを行うためのディレクティブが必要になると思います。

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

それは事実ですか、それとも他の選択肢がありますか？私がやろうとしていることのjsFiddleはここにあります：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();
});
4

2 に答える 2

6

問題はAngularであり、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>
于 2013-01-30T16:02:15.187 に答える
1

これは私のために働いた：

app.directive('jqButton', function() {
      return function(scope, element, attrs) {
          element.button();

          scope.$watch(attrs.jqButtonDisabled, function(value) {
              element.button("option", "disabled", value);
          });
      };
});

このマークアップで：

<input type="button" value="Button" jq-button jq-button-disabled="myForm.$invalid" />
于 2013-04-19T13:18:28.260 に答える