Question

我不太熟悉AngularJS中的指令，因为我依赖控制器。是否可以通过指令设置其他输入的有效性？在这种情况下，我有一个按钮，当它被点击时..它应该设置某个输入文本的有效性。但我似乎无法获得能够设定有效性的代码。

以下是HTML代码：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>

  <body>
    <div class="container">
        <div id="login-container">
            <div class="form-group">
                <span class="glyphicon glyphicon-user"></span>
            </div>
            <form name="loginForm" novalidate>
                <div class="form-group">
                    dasdas -- {{ loginForm.student_code.$error.codeValidity }}
                    <input type="text" class="form-control text-center" name="student_code"  ng-model="studentCode" placeholder="Enter Exam Code" required />
                    <span class="errors" id="error-student-code" ng-if="loginForm.student_code.$error.codeValidity">{{ errors }}</span>
                </div>
            </form>
            <login-button form="loginForm"></login-button>
            <a href="register"><button class="btn btn-primary">Register</button></a>
        </div>
    </div>
  </body>
</html>

这是JS代码：

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

  app.directive('loginButton', loginButton);

  loginButton.$inject = ["$http", "$window"];

  function loginButton($http, $window){
    return {
        template: '<button type="button" class="btn btn-primary">Take Exam</button>',
        link: function(scope, element, attrs, ctrl){
            element.on('click', function(){
                    form = attrs.form;
                    form.student_code.$setValidity('codeValidity', true);
                    scope.errors = "Code is Invalid";
                });
            }
        }
    }

以下是关于plunker的示例：http://plnkr.co/edit/kcdDgZpStQixTpGWqxOp?p=preview

PS。

我知道这可以通过控制器轻松实现，但我希望使用指令作为我的习惯来实现它。

Answer 1

是的，这是可能的，你几乎做对了。你想做的是将表单传递给隔离范围，然后在指令控制器中使用。无需手动添加事件，因为您可以使用ng-click。否则你需要使用$ scope。$ apply。

在指令中，您可以使用链接功能，但您不必这样做。通常，在链接函数中将光逻辑保持在控制器和DOM操作中是一种好习惯。

var app = angular.module("myApp", []);

app.directive('loginButton', loginButton);

loginButton.$inject = ["$http", "$window"];

function loginButton($http, $window){
  return {
    template: '<button type="button" class="btn btn-primary" ng-click="click()">Take Exam</button>',
    scope: {
      form: '='
    },
    controller: function($scope){
      $scope.click = function(){
        form = $scope.form;
        form.student_code.$setValidity('codeValidity', false);
      };
      
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<div ng-app="myApp">
    <div class="container">
        <div id="login-container">
            <div class="form-group">
                <span class="glyphicon glyphicon-user"></span>
            </div>
            <form name="loginForm" novalidate>
                <div class="form-group">
                    dasdas -- {{ loginForm.student_code.$error }}<br>
                    <input type="text" class="form-control text-center" name="student_code"  ng-model="studentCode" placeholder="Enter Exam Code" required />
                    <span class="errors" id="error-student-code" ng-if="errors">{{ errors }}</span>
                </div>
            </form>
            <login-button form="loginForm"></login-button>
            <a href="#"><button class="btn btn-primary">Register</button></a>
        </div>
    </div>
</div>

在AngularJS中点击按钮时使用指令设置其他输入的有效性

1 个答案: