2

ヘッダー、ngview ディレクティブ、およびフッターを含むレイアウト/テンプレートとして使用している index.html ファイルがあります。ngview でレンダリングされたビューで「解決」プロパティを正常に使用して、非同期呼び出しの完了後にデータを表示していますが、メインの index.html ファイルにあるヘッダーのナビゲーション バーを別のコントローラーにリンクしようとしています。非同期呼び出しから返された値が入力されます。2つの問題があるようです。

  1. データが利用可能になったときにビューが更新されるように、工場からのデータがngrepeatに「バインド」されないのはなぜですか。
  2. index.html ファイル自体に解決を実装するにはどうすればよいですか? 「/」へのパスを解決するには、ページをレンダリングする前に解決内のすべてのデータをロードする必要があると考えましたが、ページ全体ではなく、ngview コンポーネントにあるものだけだと思います。

index.html (省略)

<html ng-app="app">
<body>
 <nav class="navbar navbar-default header-navbar" role="navigation">
        <ul class="nav navbar-nav" data-ng-controller="NavController">
            <li class="active"><a href="#">Home</a></li>
            <li ng-repeat="brand in brands">
                <a href="#/brand/{{ brand.slug }}">{{brand.name}}</a>
            </li>
        </ul>
 </nav>
 <div ng-view></div>
</body>
</html>

app.js (省略形)

var app = angular.module('app',['MockDataService','ngSanitize']).
    config(['$routeProvider',
        function($routeProvider){
            $routeProvider
                .when('/',
                {
                    controller: 'SiteController',
                    templateUrl: 'partials/home.html',
                    resolve:{
                        'Brands':function(BrandFactory){
                            return BrandFactory.promise;
                        }
                    }
                })
...
shop.controller('SiteController',SiteController)
    .controller('NavController',NavController);

コントローラー

var SiteController = function ($scope, SiteFactory, BrandFactory){
    $scope.settings = SiteFactory.settings;
    $scope.brands = BrandFactory.getBrands();
    console.log($scope);
}
var NavController = function($scope, BrandFactory, $location)
{
    $scope.brands = BrandFactory.getBrands();
    console.log($scope);
}

service.js

var MockDataService = angular.module('MockDataService',[])
    .factory('BrandFactory',function($http){
        var factory = {};
        var brands = {};
        var promise = $http.get('/data/brands.json')
            .success(function(data){
                brands = data;
            });

        factory.getBrands = function(){
            return brands;
        };
        factory.getBrandBySlug = function(slug){
            for(var i=0; i< brands.length; i++)
            {
                if(brands[i].slug === slug) return brands[i];
            }
        };

        factory.promise = promise;

        return factory;
    })
4

1 に答える 1