AngularJS - トリガー変数がスコープ内で変更されたとき、私のエラーメッセージは更新されませんか？

Question

私はAngularの新機能ですので、これは本当に明白な答えではおそらく簡単な質問ですが、私はここで尋ねると思ったので、同様の記事を読むことからそれを解決することはできませんでした。

基本的に私はテキスト入力フィールドを持っていますが、その中にコンテンツがあるかどうかによってリアルタイムでその下にエラーメッセージが表示されるようにしようとしています（他のフィールドもあります別の基準に基づいて表示/消滅するさまざまなエラーメッセージが表示されるので、必要なフィールドとして設定するだけで他の目的には使用できません）

私が知る限り、トリガー変数はテキストを入力または削除するときとまったく同じように更新されますが、エラーメッセージ自体は明らかにメモを取得しておらず、そのままそのままです。

<div class="col-sm-12"> 
    <form class="form-horizontal" autocomplete="off" name="createRiskAssessmentForm"> 
     <div class="form-group"> 
      <label for="inputRiskNameId" class="col-sm-2">Name:</label> 
      <div class="col-sm-6"> 
       <input id="inputRiskNameId" class="form-control" type="text" ng-model="riskAssessmentTable.name" name="riskNameField"> 
       <div ng-hide="$scope.nameFieldHasContent" class="alert alert-danger">This field is required!</div> 
      </div> 
     </div> 
    </form> 
</div> 

コントローラー：

'use strict' 

module.exports = function (module) { 
    module.controller('CreateRiskAssessmentTableController', ['$scope', '$rootScope', function($scope, $rootScope) { 

     $scope.$watch('riskAssessmentTable.name', function(name) { 
      if (name == '') { 
       $scope.nameFieldHasContent = false; 
      } 
      else { 
       $scope.nameFieldHasContent = true; 
      } 
      console.log('Name field has content?: ' + $scope.nameFieldHasContent); 
     }); 

    }]); 
}; 

は私が間違って何をやっている

ここで私はこれまで

ビューを持っているもののカットダウン版ですか？

Answer 1

私は、この行が正しいと思ういけない '$スコープ'

<div ng-hide="$scope.nameFieldHasContent" class="alert alert-danger">This field is required!</div>

削除NG-皮の部分は、それを変更する：

<div ng-hide="nameFieldHasContent" class="alert alert-danger">This field is required!</div>

また、これを支援するためにNG-汚いとNG-有効な角度のディレクティブをチェックアウトすることができます。

Answer 2

ng-modalがオブジェクトriskAssessmentTable.nameを指しているので、コントローラー内でriskAssessmentTableを事前に定義する必要があります。以下のコードを試してみてください。

module.exports = function (module) { 
    module.controller('CreateRiskAssessmentTableController', ['$scope', '$rootScope', function($scope, $rootScope) { 

     $scope.riskAssessmentTable = {}; 

     $scope.$watch('riskAssessmentTable.name', function(name) { 
      if (name == '') { 
       $scope.nameFieldHasContent = false; 
      } 
      else { 
       $scope.nameFieldHasContent = true; 
      } 
      console.log('Name field has content?: ' + $scope.nameFieldHasContent); 
     }); 

    }]); 
};