<h2 class="text-center">要跟踪的单词</h2>
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: ........
解决方案
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>
这篇关于为什么我的控制器中数组的更改没有反映在我的视图中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
