Question

这是shizzle：我有一个基本的单页角度应用程序，我正在构建我的投资组合。在控制器中我有3个控制器，项目是我遇到的问题。

我正在使用ng-repeat来列出列表中的每个项目。然后我通过javascript定位它们以正确调整它们的大小。

问题在于它根本没有调整它们的大小。它们在JW.core运行之前没有加载，即使我按照建议使用$ viewContentLoaded。因此它们是0px x 0px而不是例如500 x 500。

我知道这个，因为如果我在JW.core中的resize函数调用上设置了超时，那很好。然后重复每个项目，并相应调整大小。

我还认为，因为我对角度很新，所以我可能做错了。

controllers.js：

function mainCtrl($scope) {
}

function projectsCtrl($scope, $http) {
  $http.get('data/projects/projects.json').success(function(data) {
        $scope.projects = data;
  });

  $scope.$on('$viewContentLoaded', function () {
      new JW.core();
  });
}

function aboutCtrl($scope, $http) {
  $http.get('data/about/about.json').success(function(data) {
        $scope.about = data;
  });
}

core.js：

var JW = JW || {};

JW.core = function() {

    var initialise = function () {
            new JW.elementDimensions();
        };

    initialise();

};

elementdimensions.js：

var JW = JW || {};

JW.elementDimensions = function () {

    var scrollbarWidth,
        resizeDim = function (e, ww, wh) {

            var wh = window.innerHeight;    

            $(e).width(ww + 'px');
            $(e).height(wh + 'px');

        },

        initialise = function () {

            var ww = window.innerWidth - scrollbarWidth,
                $targets = $('#projects').find('.project');

            $('.project-wrapper').width((window.innerWidth - scrollbarWidth) * $targets.length);
            $('.project-wrapper').height(window.innerHeight);

            _.each($targets, function(e) {
                resizeDim(e, ww);
                console.log(e);
            })

        };


    initialise();

    $(window).on('resize', function() {
        initialise();
    });

    return this;

};

和视图：

    <div class="project" ng-repeat="project in projects">

        <div class="project-img" style="background: url('{{project.imageUrl}}') fixed;" id="{{project.id}}">
            <div class="info-container">
                <h1>{{project.title}}</h1>
                <p class="description">
                    {{project.description}}
                </p>
                <div class="tags">
                    <ul>
                        <li ng-repeat="tag in project.tags">{{tag}}</li>
                    </ul>
                </div>
                <a class="goto" href="{{project.link}}">{{project.linktext}} →</a>
            </div>
        </div>

    </div>

Answer 1

您要做的是在路线上使用解决。

$routeProvider.when('/products', {
    templateUrl: 'products.html',
    controler: 'productsCtrl',
    resolve: {
        products: ['$http', '$q', function($http, $q){
            var deferred = $q.defer();
            $http.get('data/projects/projects.json').success(function(data) {
                deferred.resolve(data);
            });
            return deferred.promise;
        }]
    }
});

然后，在你的控制器中，注入$ scope和products而不是$ scope和$ http，除非你在控制器运行时还需要$ http用于其他任何东西，在这种情况下只需添加产品。这将基本上做的是延迟控制器的初始化，直到内容被加载。

$ viewContentLoaded在加载视图内容之前触发

1 个答案: