同じコントローラ（サービスからの1つのコントローラ）とディレクティブの2つのスコープの違いは何ですか？

Question

以下の2つのスコープ変数を持つコントローラがあり、そのうちの1つのみが自分のディレクティブに渡されますか？

.controller('newsController', ['$scope', 'gasPrices', 
            function($scope, gasPrices) { 

    gasPrices.success(function(data) { 
    $scope.gasFeed = data.series[0];  
    }); 

    $scope.myData02 = [2.095,2.079,2.036,1.988,1.882,1.817,1.767,1.747]; 

}]) 
; 

私は1つのスコープを受け入れるディレクティブを持っていますが、他のスコープは受け付けていません。

これは、あなたがなぜ

<line-chart chart-data="myData02"></line-chart> 

知っていない

<line-chart chart-data="gasFeed"></line-chart> 

これがない作品？

Answer 1

非同期サービスからのデータが利用可能になるまで、ディレクティブのインスタンスを作成するのを延期する必要があります。何かのように：

<line-chart ng-if="gasFeed" chart-data="gasFeed"></line-chart> 

これは、gasFeedスコーププロパティにデータがあるまで、ディレクティブをインスタンス化してはなりません。

Answer 2

これを試してみてください：

.controller('newsController', ['$scope', 'gasPrices', 
            function($scope, gasPrices) { 
    //Create a object that will be pass in the directive, then when this variable 
    //it's loaded, the value in the directive (if the scope of the directive uses the '=' binding) will be updated 
    $scope.gasFeed = {}; 

    gasPrices.success(function(data) { 
    $scope.gasFeed = data.series[0];  
    }); 

    $scope.myData02 = [2.095,2.079,2.036,1.988,1.882,1.817,1.767,1.747]; 

}]); 

Answer 3

はい。

ここでは、gasFeedスコープにアクセスできるのは、サービスからのコールバックが成功したときだけです。したがって、それまでmyData02スコープがロードされます。

両方にアクセスしたい場合。次に、これを試してください：

.controller('newsController', ['$scope', 'gasPrices', 
            function($scope, gasPrices) { 

    gasPrices.success(function(data) { 
    $scope.gasFeed = data.series[0]; 
    $scope.myData02 = [2.095,2.079,2.036,1.988,1.882,1.817,1.767,1.747];  
    }); 
}]);