Why are changes in my arrays in my controller not being reflected in my view?

问题

This is branching off of my last question: How to call $scope.$apply() using “controller as” syntax

I am using TypeScript in conjunction with Angular

Problem: I have an ng-repeat in my view

    <!-- Simple View -->
<div ng-hide="wordTrack.showDetailedView">
    <div class="col-md-12" id="wordTrackResult" style="padding: 10px; overflow-y: auto; overflow-x: hidden;">

        <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>

        <p class="noWordText" ng-show="(wordTrack.notUsedWordList.length > 0)">The following words have not yet been used</p>

        <div class="wordListWellWrapper row" ng-repeat="words in wordTrack.notUsedWordList">
            <div class="col-md-5 wordListWell form-control" style="background-color: gray;">
                <strong class="wordListWord">{{words}}</strong>
            </div>
            <div class="col-md-2">
                <span aria-hidden="true" class=" glyphicon-remove glyphicon" ng-click="wordTrack.removeWord(words)"></span>
            </div>
        </div>

    </div>
</div>

which is using two arrays in my controller (wordList and notUsedWordList):

 module WordsToTrackController {
export class Controller {
    public static $inject = ["$scope", "CampaignFactory", "VideoFactory", "DashboardFactory", "WordsToTrackFactory"];
    wordList: Array<IWordTrackItem>;
    notUsedWordList: Array<string>;


    constructor($scope: ng.IScope, campaignFactory, videoFactory, dashboardFactory, wordsToTrackFactory) {
        this.campaignFactory = campaignFactory;
        this.videoFactory = videoFactory;
        this.dashboardFactory = dashboardFactory;
        this.wordsToTrackFactory = wordsToTrackFactory;

        this.wordList = [];
        this.notUsedWordList = [];

        this.hasData = false;
        this.fetchInProgress = false;

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

        $scope.$on("detail-switch",() => {
            this.showDetailedView = this.dashboardFactory.isDetailedView;
        });
    }}}

Inside my constructor, I am calling

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

which executes setWordLists() which attempts to grab the data from one of my factories and set the values of the arrays (which it is doing correctly)

Controller:

   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 : [];
        });
    }

Factory:

    function doGetWordsToTrackModel(campaignId: number, videoId: number) {
        return $http
            .get(url, {
            params: {
                videoId: videoId,
                campaignId: campaignId
            }
        });
    }

Now, the problem is that even though the arrays are being set to the correct values, it is not being updated in my view (inside the ng-repeat).

I don't want to call $scope.$apply() for a quick fix either. Can anyone spot the source of the problem?

Edit: $scope.$apply() doesn't help, so i'm thinking ng-repeat isn't binding correctly, but I can't see how I set the view up incorrectly.

Edit: ........

回答1:

I'm a moron and put my ' ng-controller="Controller as controller" ' on the incorrect element.......

wrong code:

                            <div class="col-md-4" >
                        <h2 class="text-center" ng-controller="WordsToTrackController as wordTrack">Words to Track</h2>

corrected code:

                            <div class="col-md-4" ng-controller="WordsToTrackController as wordTrack">
                        <h2 class="text-center">Words to Track</h2>

来源：https://stackoverflow.com/questions/28013630/why-are-changes-in-my-arrays-in-my-controller-not-being-reflected-in-my-view