2

ここにシズルがあります: 私は自分のポートフォリオを構築している基本的な 1 ページの角度のあるアプリを持っています。コントローラーには3つのコントローラーがあり、プロジェクトは私が問題を抱えているものです。

リスト内の各プロジェクトを取得するために ng-repeat を使用しています。次に、javascript でそれらをターゲットにして、正しくサイズ変更します。

問題は、単にサイズを変更しないことです。提案されているように $viewContentLoaded を使用していても、 JW.core が実行される前にロードされません。したがって、たとえば 500 x 500 ではなく、0px x 0px になります。

JW.core 内のサイズ変更関数呼び出しにタイムアウトを設定しても問題ないので、これはわかっています。次に、各プロジェクトが繰り返され、それに応じてサイズを変更できます。

また、私はAngularにかなり慣れていないので、おそらく何か間違っていると思いました。

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}} →&lt;/a>
            </div>
        </div>

    </div>
4

1 に答える 1

2

やりたいことは、ルートでresolveを使用することです。

$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 と $http の代わりに $scope と products を注入します。ただし、コントローラーの実行中に $http が必要な場合は、製品を追加するだけです。これが本質的に行うことは、コンテンツがロードされるまでコントローラーの初期化を遅らせることです。

于 2013-02-24T20:58:37.657 に答える