我在模板中有以下代码:
<a href="" ng-ctrl="ThemesCtrl" ng-click="checkThemeContent({{theme}})" ng-repeat="theme in themes" ng-hide="theme[filterProp] !== filterValue" class="list-group-item">
<b>{{theme.name}}</b>
<span class="themesListIcons">
<i class="fa fa-check-square-o"></i> {{theme.avg_score}}
<i class="fa fa-comment-o"></i> {{theme.count_of_cards}}
</span>
</a>
正在调用以下方法:
$scope.checkThemeContent = function(theme) {
console.log("Trying to get cards for theme id: " +theme.id);
console.log(theme);
$scope.selectedTheme = theme;
if(theme.count_of_cards >0) {
$rootScope.$emit('detailDisplayed', {});
$scope.displayedTemplate = 'detail';
} else {
$scope.displayedTemplate = 'empty';
}
};
问题是单击是执行方法中的代码后,$ scope.displayedTemplate的作用域已更改,但模板未显示,第二次单击后一切正常。
我不知道什么会导致这种行为。
有人可以告诉我我在做什么错吗?
这是div,其中包含基于displayTemplate范围的视图:
<div class="col-md-8" ng-controller="CardsCtrl">
<!-- ADD TEMPLATE -->
<div ng-if="displayedTemplate == 'add'" class="header" ng-include src="'/views/themes/add_theme.html'">
</div>
<!-- EDIT TEMPLATE -->
<div ng-if="displayedTemplate == 'edit'" class="header" ng-include src="'/views/themes/edit_theme.html'">
</div>
<!-- THEME DETAIL TEMPLATE -->
<div ng-if="displayedTemplate == 'detail'" class="header" ng-include src="'/views/themes/detail_theme.html'">
</div>
<!-- DEFAULT TEMPLATE -->
<div ng-if="displayedTemplate == 'default'" class="header" ng-include src="'/views/themes/default_theme.html'">
</div>
<!-- NO CARD TEMPLATE -->
<div ng-if="displayedTemplate == 'empty'" class="header" ng-include src="'/views/themes/empty_theme.html'">
</div>
</div>
许多建议
我认为问题在于如何将参数传递给函数。简单地通过它ng-click="checkThemeContent(theme);"
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句