NG-INIT不能正常工作
NG-INIT not working properly
我尝试了几种方法,但由于某种原因,我无法让init方法在我正在构建的选项卡应用程序上工作。
我正在使用http(通过WordPress REST API)拉入JSON,并且必须使用"as"语法才能正常工作。一切工作一旦我点击初始选项卡,但我需要第一个选项卡加载页面加载。
应用程序如下:
JS:
var homeApp = angular.module('homeCharacters', ['ngSanitize']);
homeApp.controller('characters', function($scope, $http) {
$http.get("http://example.com/wp-json/posts?type=character").then(function(response) {
$scope.myData = response.data;
});
});
homeApp.filter('toTrusted', ['$sce',
function($sce) {
return function(text) {
return $sce.trustAsHtml(text);
};
}
]);
HTML:
<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData">
<div class="char_copy" ng-repeat="item in myData" ng-bind-html="item.content | toTrusted" ng-show="myData.tab === item.menu_order">
{{ item.content }}
</div>
<div class="char_tabs">
<nav>
<ul ng-init="myData.tab = 0">
<li ng-repeat="item in myData">
<a href ng-click="myData.tab = item.menu_order">
<img src="{{ item.featured_image.source }}" />
<h3>{{ item.title }}</h3>
</a>
</li>
</ul>
</nav>
</div>
</section>
<!--end characters-->
我假设有一些简单的我错过了。我要初始化的选项卡的menu_order内容为0。在MyData下的ng-inspector中显示选项卡:0
我将感激任何人可以提供的任何帮助!当前发生的事情是当UI在页面上呈现时,ng-init
指令首先得到处理,它评估myData.tab = 0
并将myData
的tab
属性值设置为0
。此后,当异步API完成时,检索到的数据再次分配给myData
对象,这将清除旧的myData
值。
你不应该在这种情况下使用ng-init
。您应该将从ajax检索到的data
设置为来自控制器本身的myData
的另一个属性。
homeApp.controller('characters', function($scope, $http) {
$scope.myData = { tab: 0 }; //set default tab
$http.get("http://example.com/wp-json/posts?type=character").then(function(response) {
$scope.myData.data = response.data;
});
});
标记
<li ng-repeat="item in myData.data">
相关文章:
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- JS可以在Chrome中工作,但不能在Firefox中工作
- 最大高度转换不;不工作,工作缓慢
- Gulp-rev:不是第一次工作,而是在第一次工作之后工作
- JQuery - Ajax: encodeUriComponent不工作(EncodeUri工作)