如何更改函数内范围的值 - 为什么我的代码不起作用？

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>

If it works then I think it has something to do with the overall logic of my code. The function $scope.afterHide is triggered by an event on one of the directives, this directive is defined outside the controller. In html its basically just another div that has a state of change. When a change happens, other elements on the page will also be affected, in this context, that other element is the label tag. When the change happens, the $scope.afterHide function within the controller is called by the directive which is defined outside of the controller.

范围以模仿应用程序 DOM 结构的分层结构排列。

ng-click 指令不能在其层次结构之外的作用域上调用函数。此外，如果 ng-click 指令位于使用隔离作用域的指令内的模板上，则事件必须通过表达式“&”绑定连接到父作用域。

有关详细信息，请参阅

如何更改函数内范围的值 - 为什么我的代码不起作用？

How to change value of scope within a function - Why is my code not working?

angularjs

angularjs-1.5