Angular ng-show未在视图中显示元素

Question

I am trying to implement a simple Angular ng-show in my code but I cannot seem to make it work. I am attaching the code below.

HTML

  <div ng-repeat="question in data.questions track by $index" ng-if="question.visible" class="slide">

  <md-radio-group ng-model="question.selectedAnswer" ng-if="vm.showSliderChecker">
    <md-radio-button ng-repeat="ans in question.answer track by $index" ng-value="ans._id"
                     ng-click="radioBtnClick({qId: question._id, ansId: ans._id})">{{::ans.description}}
    </md-radio-button>
  </md-radio-group>




  <div class="wrapper" ng-show="vm.showSliderChecker">
 <div class="toggle_radio">
<input type="radio" class="toggle_option" id="first_toggle" name="toggle_option" >

<label for="first_toggle" class="widthEighth" ng-repeat="ans in question.answer track by $index" ng-value="ans._id"
                     ng-click="radioBtnClick({qId: question._id, ansId: ans._id}); showSliderClickedMessage()"><p> {{$index+1}} </p></label>


  </div> 

</div>

</div>

Angular Controller vm.checkSliderForDisplay = checkSliderForDisplay;

function initController(){
   checkSliderForDisplay();
}

function checkSliderForDisplay() {
  if($stateParams.testType === "Stress_management"){
        vm.showSliderChecker = true;

        console.log("The value of slider checker is true and here's proof ----> ");
        console.log(vm.showSliderChecker);
      }
      else{
        vm.showSliderChecker = false;
        console.log("Alas, the slider checker is just a lot of false advertising and nothing more.");
        console.log(vm.showSliderChecker);
      }
}

initController();

Now here's the problem:

The console logs are showing on the console but the both the divs stay hidden. I have looked for a solution on this website and tried a bunch of combinations thinking I am missing some minute detail but I just can seem to make it work.

Answer 1

As you are using the Controller As synstax vm is the name you can refer to the controller in the scope.

If your code is running in a different closure, like from the controller constructor, you may need to refer to it differently.

Looks like that piece of code is called in the Controller constructor so "vm" won't be a defined variable there. You should use "this" instead:

function checkSliderForDisplay() {
  if(this.testType === "Stress_management"){
    this.showSliderChecker = true;

    console.log("The value of slider checker is true and here's proof ----> ");
    console.log(this.showSliderChecker);
  }
  else{
    this.showSliderChecker = false;
    console.log("Alas, the slider checker is just a lot of false advertising and nothing more.");
    console.log(this.showSliderChecker);
  }
}

If you add "use strict"; at the top of your js files you should get some warning.