関数内のスコープの値を変更する方法 - コードが機能しないのはなぜですか？

Question

単純なng-classバインディングは、関数内で呼び出されたときにトリガされません。どのように解決できますか？この例では

$scope.afterHide = function() { 
 
    $scope.inputState = "fade-in"; 
 
}

<label ng-class="inputState">Next statement</label>

Answer 1

作品罰金：

angular.module("app",[]) 
 

 
.controller("ctrl", function($scope) { 
 

 
    $scope.afterHide = function() { 
 
     $scope.inputState = "fade-in"; 
 
    }; 
 
    
 
    $scope.reset = function() { 
 
     $scope.inputState = ""; 
 
    }; 
 
});

.fade-in { 
 
    background-color: red; 
 
}

<script src="//unpkg.com/angular/angular.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 

 
    <label ng-class="inputState">Next statement</label> 
 

 
    <br><button ng-click="afterHide()">Invoke afterHide</button><br> 
 
    <button ng-click="reset()">Reset</button> 
 
</div>

---

それは、私が動作する場合それは私のコードの全体的なロジックと関係があると思う。関数$scope.afterHideは、ディレクティブの1つのイベントによってトリガされます。このディレクティブはコントローラ外で定義されます。 HTMLでは基本的にちょうど別のdivに変更の状態があります。変更が発生すると、ページ上の他の要素も影響を受けます。このコンテキストでは、他の要素がラベルタグです。変更が発生すると、コントローラー内の$scope.afterHide関数が、コントローラーの外で定義されているディレクティブによって呼び出されます。

スコープは、アプリケーションのDOM構造を模倣する階層構造で配置されています。

ng-click指令はそのhierachy外である範囲で機能を呼び出すことができません。また、ng-clickディレクティブが分離スコープを使用するディレクティブ内のテンプレート上にある場合、そのイベントは親スコープの式 "&"バインディングで接続する必要があります。

もっとINFOMATIONについて、

• AngularJS Developer Guide - Scopes
• AngularJS Developer Guide - Directives (Isolating a Scope)