为什么我的控制器中的数组更改没有反映在我的视图中?
Why are changes in my arrays in my controller not being reflected in my view?
这是我上一个问题的分支:
我将 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()
没有帮助,所以我认为 ng-repeat 没有正确绑定,但我看不出我是如何错误地设置视图的。
编辑:.......
我是个白痴,把我的“ng-controller="Controller as 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>
这是我上一个问题的分支:
我将 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()
没有帮助,所以我认为 ng-repeat 没有正确绑定,但我看不出我是如何错误地设置视图的。
编辑:.......
我是个白痴,把我的“ng-controller="Controller as 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>