Question

我尝试了几种方法，但出于某种原因，我无法让init方法在我正在构建的选项卡应用程序上工作。

我使用http（通过WordPress REST API）提取JSON，并且必须使用＆＃39; as＆＃39;语法让它正常工作。单击初始选项卡后，一切正常，但我需要在页面加载时加载第一个选项卡。

这是App：

＆＃13;

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);
    };
  }
]);

＆＃13;

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-->

＆＃13;

我假设有一些我想念的简单。我想要初始化的选项卡的menu_order内容为0.在MyData下的ng-inspector中显示选项卡： 0

我愿意为任何人提供任何帮助！

Answer 1

目前发生的事情是在页面上呈现UI时，首先处理ng-init指令并评估myData.tab = 0并将myData的{{1}}属性值设置为{{ 1}}。此后，当异步API完成时，检索到的数据将再次分配给tab对象，从而消除旧的0值。

在这种情况下，您不应该使用myData。您应该将从ajax检索到的myData设置为来自控制器本身的ng-init的另一个属性。

<强>代码

data

<强>标记

myData

Answer 2

在调用服务之前，您只需要将范围声明为情感对象或null，然后它就可以工作，如下所示：$ scope.myData = {};

NG-INIT无法正常工作

2 个答案: