Question

我几天前刚刚使用myApp示例开始使用AngualrJS（喜欢它），但我还没有完全掌握一些事件时间。

我有一个启动templateURL和控制器的路由器。 templateURL是一个部分，它使用ng-repeat来循环我用控制器加载的JSON。如果控制器包含静态JSON，它似乎按照我的意图工作，但是当我使用$ http加载JSON时，我开始遇到时间问题：

在$ http返回之前，部分解释在图片路径之类的内容之前返回404，然后才能被替换 - ＆gt; ＆＃34; {{album.thumbnail}} JPG＆＃34;
我还有一个指令在控制器启动异步$ http调用后触发一次，并且在$ http调用实际在控制器内完成之后再次触发（理想情况下我只希望它在$ http完成后触发一次）

我的目的是通过$ http使用ng-repeat来检索专辑JSON数据，以循环模板来构建我的画廊。一旦完成循环，我想调用最终功能，为画廊提供类似Pinterest的砌体布局。这似乎是一个非常典型的流程（$ http - ＆gt; ng-repeat - ＆gt;最终功能），所以我此时必须缺少一些小东西。

期待更多地了解AngularJS ......

HTML

<!doctype html>
<html lang="en" ng-app="myApp">
  <head>
    <title>myApp</title>
  </head>
  <body>

    <div ng-view></div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular-route.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="js/modernizr-transitions.js"></script>
    <script src="js/jquery.masonry.min.js"></script>
  </body>
</html>

模块

angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
])
.config(['$routeProvider', function ($routeProvider) {

  $routeProvider.when('/gallery', {templateUrl: 'gallery.html', controller: 'ctrlGallery'});
  $routeProvider.otherwise({redirectTo: '/gallery'});

 }]);

控制器

angular.module('myApp.controllers', [])
.controller('ctrlGallery', ['$scope', '$http', function (lcScope, lcHttp) {

  lcHttp.get("/services/gallery.php?start=1&count=12")
  .success(function(data, status, headers, config) {
    lcScope.albums = data.DATA;
  })

}]);

指令

angular.module('myApp.directives', [])
.directive('postGalleryRepeatDirective', function () {

  return function (scope, element, attrs) {

    if (scope.$last) {
      $('#container').masonry({
        itemSelector: '.box',
        columnWidth: 250,
        isAnimated: !Modernizr.csstransitions,
        isFitWidth: true
      });
    }

  };

});

gallery.html partial

<div class="masonry" ng-controller="ctrlGallery">
  <div class="box masonry-brick" ng-repeat="album in albums" post-gallery-repeat-directive>
    <a href="{{ album.link }}">
      <img src="/img/{{ album.thumbnail }}.jpg">
    </a>
    <p>{{ album.name }}</p>
  </div>
</div>

Answer 1

您似乎忘记在http get调用中将$ scope.last设置为true？在http调用返回后，您打算将其设置为true吗？如果是这样，你可以为你将ng-hide设置为$ scope.last的值的部分做一些类似的事情。因此，它会隐藏框的内容（以及在正确插值之前断开的链接），直到设置了正确的值。

控制器，AJAX，ng-repeat和指令的AngularJS计时问题

1 个答案: