How to call $scope.$apply() using "controller as" syntax

10,292

To answer the question at hand here, you can use $scope() methods in a controller when using the controller-as syntax, as long as you pass $scope as a parameter to the function. However, one of the main benefits of using the controller-as syntax is not using $scope, which creates a quandary.

As was discussed in the comments, a new question will be formulated by the poster to review the specific code requiring $scope in the first place, with some recommendations for re-structuring if possible.

Share:
10,292

Related videos on Youtube

Sherman Szeto
Author by

Sherman Szeto

Find me on LinkedIn Here

Updated on October 08, 2022

Comments

  • Sherman Szeto
    Sherman Szeto over 1 year

    I am trying to limit my use of $scope in my controllers as much as possible and replace it with the Controller as syntax.

    My current problem is that i'm not sure how to call $scope.$apply() in my controller without using $scope.

    Edit: I am using TypeScript 1.4 in conjunction with angular

    I have this function

    setWordLists() {
      this.fetchInProgress = true;
      var campaignId = this.campaignFactory.currentId();
      var videoId = this.videoFactory.currentId();
    
      if (!campaignId || !videoId) {
        return;
      }
    
      this.wordsToTrackFactory.doGetWordsToTrackModel(campaignId, videoId)
      .then((response) => {
        this.fetchInProgress = false;
        this.wordList = (response) ? response.data.WordList : [];
        this.notUsedWordList = (response) ? response.data.NotUsedWords : [];
      });
    }
    

    being called from

    $scope.$on("video-switch",() => {
               this.setWordLists();
    });
    

    And it's (the arrays wordList and notUsedWordList) is not being updated in my view:

    <div class="wordListWellWrapper row" ng-repeat="words in wordTrack.wordList">
      <div class="col-md-5 wordListWell form-control" ng-class="(words.IsPositive)? 'posWordWell': 'negWordWell' ">
        <strong class="wordListWord">{{words.Word}}</strong>
        <div class="wordListIcon">
          <div class="whiteFaceIcon" ng-class="(words.IsPositive)? 'happyWhiteIcon': 'sadWhiteIcon' "></div>
        </div>
      </div>
      <div class="col-md-2">
        <span aria-hidden="true" class="glyphicon-remove glyphicon" ng-click="wordTrack.removeWord(words.Word)"></span>
      </div>
    </div>
    

    Along the same lines of $apply, is there another way of calling $scope.$on using Controller as?

    Thanks!

    • Claies
      Claies over 9 years
      under 99% of all situations, you only need to call $scope.$apply() when you operate on the dom directly without angular's knowledge. Unfortunately, many people resort to $scope.$apply() as a "fix-all" when something doesn't work, but usually the better thing to do is correct the code so that angular is aware of what is happening.
    • Claies
      Claies over 9 years
      your code doesn't really show where the $scope.$on() function is at in the controller, so perhaps we take a bit closer look at the controller code?
    • tasseKATT
      tasseKATT over 9 years
      If you code isn't working you should post it as another question, as you have already asked about something else here. People will be confused otherwise :)