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

Question

Simple ng-class binding is not triggered when called inside a function, how can I resolve this?

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

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

Inside scope options 'my-show': '=' should be 'myShow': '=' — Pankaj Parkar
– Pankaj Parkar, Commented Jun 14, 2017 at 16:21
Yes.. there's actually a lot of error with setting up that directive, but its not relevant to my question. The actual error is in : $scope.afterHide = function() { $scope.inputState = "fade-in"; // this line is not called here WHY? console.log('Refresh statement fully hidden AFTERHIDE'); } — redleome
– redleome, Commented Jun 14, 2017 at 16:33
Eliminate any issues that aren't relevant to the problem. See How to create a Minimal, Complete, and Verifiable example. — georgeawg
– georgeawg, Commented Jun 14, 2017 at 17:20

georgeawg · Accepted Answer · 2017-06-14 19:49:12Z

1

Works fine in this example:

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.

Scopes are arranged in hierarchical structure which mimic the DOM structure of the application.

The ng-click directive cannot invoke a function on a scope that is outside its hierachy. Also if the ng-click directive is on a template inside a directive that uses isolate scope, the event must be connected to parent scope with expression, "&", binding.

For more infomation, see

edited Jun 14, 2017 at 19:49

answered Jun 14, 2017 at 18:10

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

redleome Over a year ago

Thank you for replying. 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.

redleome Over a year ago

The directive was calling the function, they both had the same controllers but they were out of scope. So I just rearranged the tags in the html file and got it working . I'm trying to give you a point but I don't have enough privilege to do that yet

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related