Question

这是我上一个问题的分支：How to call $scope.$apply() using “controller as” syntax

我将TypeScript与Angular结合使用

问题：我的观点中有一个ng-repeat

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

在我的控制器中使用两个数组（wordList和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;
        });
    }}}

在我的构造函数中，我正在调用

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

执行setWordLists（），它尝试从我的某个工厂获取数据并设置数组的值（它正在正确地执行）

控制器：

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

厂：

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

现在，问题是即使数组被设置为正确的值，它也不会在我的视图中更新（在ng-repeat内）。

我不想调用$ scope。$ apply（）来快速修复。有谁能发现问题的根源？

编辑： $scope.$apply()没有帮助，所以我认为重复没有正确绑定，但我无法看到我如何错误地设置视图。

编辑：........

Answer 1

我是个白痴，把我的'ng-controller =“控制器作为控制器''放在不正确的元素上......

错误的代码：

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

更正后的代码：

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

为什么我的控制器中的数组中的更改未反映在我的视图中？

1 个答案: