ng-show가 AngularJS의 지시문 템플릿에서 작동하지 않습니다.

지시문에서 CSS가 속성에 따라 반응하지 않는 이유가 궁금합니다. 내 ng-show는 특정 입력의 필수 오류가 true인지 아닌지에 따라 간단한 부울 조건입니다. plunker 여기ng-show가 AngularJS의 지시문 템플릿에서 작동하지 않습니다.

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

    <head> 
    <script src="https://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"> 
        Required condition -- {{ loginForm.student_code.$error.required }} 
        <!-- dasdas -- {{loginForm.student_code.$error.codeValidity }} --> 
        <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="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> 
      <!-- <br /> <strong>A message must be seen after the colon if codeValidity is true: </strong> --> 
     </div> 
    </div> 
    </body> 
    <script> 
    var app = angular.module("myApp", []); 

    app.directive('loginButton', loginButton); 

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

    function loginButton($http, $window){ 
     return { 
      scope: { 
       form: '=' 
      }, 
      template: '<button type="button" class="btn btn-primary" ng-show="{{ !form.student_code.$error.required }}" ng-click="click()">Take Exam</button>', 
      controller: function($scope){ 
      $scope.click = function(){ 
      form = $scope.form; 
      form.student_code.$setValidity('codeValidity', false); 
      $scope.errors = "Code is Invalid"; 
      }; 
     } 
     } 
    } 
    </script> 
</html>

됩니다 : https://plnkr.co/edit/plpKSGBtWqQnzhL60OfJ?p=preview

필요한 검증은 사실이지만 테이크 시험이 텍스트 상자 여기

의 사용자 입력 뭔가 때까지 숨길 수 있어야합니다 즉 내가 원하는 것은 것은 코드

출처

2016-06-04 Dean Christian Armada

필수 유효성 확인은 true이지만 사용자가 텍스트 상자에 내용을 입력 할 때까지는 시험을 숨겨야합니다. –

ng-show 내부 변수를 잘못 삽입하려고 시도했지만 ng-show이 표현식을 사용합니다. 보간 된 값은 그 값이 ng-show 지시어에 반영 될 때가되면 평가되지 않습니다. 대신, ng-show이 표현식을 평가하고 필요한 경우이를 보간하도록 허용해야합니다.

즉 대신 :

ng-show="{{ !form.student_code.$error.required }}"가 수행 ng-show="!form.student_code.$error.required".

출처

2016-06-04 03:26:17 Claies

완벽하게 작동합니다! 감사! –

Updated Plunker 업데이트 된 plunkr을 확인하십시오.

ng-show=" !form.student_code.$error.required "

바인딩을 잘못하고 있습니다.

출처

2016-06-04 03:30:28

처음에는 ng-show = " '+! scope.form.student_code. $ error.required +'"를했지만 솔루션은 실제로 완벽합니다. –

ng-show가 AngularJS의 지시문 템플릿에서 작동하지 않습니다.

답변

관련 문제