NG-INIT無法正常工作

Question

我嘗試了幾種方法，但是由於某種原因，我無法使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中，它顯示的是tab：0

我會感謝任何人都可以提供的幫助！

Answer 1

當前發生的情況是，當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">

Answer 2

在調用服務之前，您只需要聲明您的作用域為emoty對象或null即可，它將像下面這樣工作：$ scope.myData = {};