angularjs - 使用AngularJS禁用母版页中的按钮

问题描述

我有以下母版页：

<body ng-app="app" ng-controller="controller" ng-cloak>
<div class="header" ng-bind="header"></div>
<div class="content">
    <!-- This content will switch -->
    <ui-view></ui-view>
</div>
<div class="footer" ng-show="showFooter">
    <md-button class="md-raised md-primary" ng-click="cancel()">Cancel</md-button>
    <md-button class="md-raised md-primary" ng-click="ok()">OK</md-button>
</div>

以及以下<ui-view>标签中的添加联系人页面：

    <form name="form">
    <button class="round-button"></button><br />
    <md-input-container>
        <input name="name" ng-model="name" placeholder="Name" minlength="3">
        <div ng-messages="form.name.$error" ng-show="form.name.$dirty">
            <div ng-message="required">This is required.</div>
            <div ng-message="minlength">Name has to be at least 3 characters long.</div>
        </div>
    </md-input-container>
    <br />
    <md-input-container>
        <label>Phone</label>
        <input name="phone" ng-model="phone" placeholder="Phone" ng-pattern="/^[0]{1}[5]{1}[0-9]{1}[0-9]{7}$/">
        <div ng-messages="form.phone.$error" ng-show="form.phone.$dirty">
            <div ng-message="required">This is required.</div>
            <div ng-message="pattern">Please enter a valid phone number.</div>
        </div>
    </md-input-container>
    <br />
    <md-input-container>
        <label>Mail</label>
        <input name="mail" ng-model="mail" placeholder="Mail" ng-pattern="/^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/">
        <div ng-messages="form.mail.$error" ng-show="form.mail.$dirty">
            <div ng-message="pattern">Please enter a valid mail.</div>
        </div>
    </md-input-container>
    <br />
</form>

我的添加联系人页面的控制器如下：

controller: function ($scope, $state, $rootScope,$http) {
                  $rootScope.cancel = function () {
                      $state.go("contacts");
                  };
                  $rootScope.ok = function () {

                      var contactInfo = {
                          name: $scope.name,
                          phone: $scope.phone,
                          mail: $scope.mail,
                          address: $scope.address
                      };
                      $http.post("/api/Contact", contactInfo)
                          .then(function (res) {
                              alert("contact added successfully");
                          });

                      $state.go("contacts");
                  };
                  $rootScope.header = "Add Contact";
                  $rootScope.showFooter = true;

在我使用调用 Web 服务之前$http，我希望禁用母版页中的 OK 按钮，直到正确填写表单中的所有字段。

有没有办法实现这个目标？

标签： angularjs

angularjs - 使用AngularJS禁用母版页中的按钮

问题描述

解决方案

推荐阅读