カスタムディレクティブ：コントローラスコープにディレクティブのスコープにアクセスできませんが

Question

私は、ファイル名がカスタムディレクティブの属性から取得されJSONデータから読み取るために私のコントローラ内の$httpにアクセスしようとしています。ここ

が私のコードである

.directive("myCarousel", function() { 
    return { 
     restrict: 'EA', 

     scope: { 
      jsondatasource: '=' 
     }, 

     controller: "carouselCtrl", 
     link: function ($scope, element, attrs) { 

      $scope.jsondatasource = attrs.jsondatasource; 

     }, 

     template: 'mytemplate.html' 

    } 
}) 

.controller('carouselCtrl', function ($scope, $http) { 

    $scope.quotes = ""; 
    $http.get($scope.jsondatasource).success(function (data) { 
     $scope.quotes = data; 
    }); 

    // some function with operation on the data on quotes received by JSON data 

}) 

とHTMLコール

<my-carousel jsondatasource="data.json"> </my-carousel> 

Answer 1

あなたの問題は、正確には何ですか？

あなたのリンク機能がjsondatasource属性の$ scope.jsondatasource評価に角度プットために無用であるので、あなたは、あなたのディレクティブのスコープを定義しました。

Answer 2

はそれがあるかもしれないことの

link: function ($scope, element, attrs, ctrl) { 
    ctrl.jsondatasource = attrs.jsondatasource; 
}, 

Answer 3

一つの方法は、スコープに取り付けられ、パラメータとしてjsonDataSourceを取って、コントローラ内部の機能にあなたのhttp.getを置くことですしてみてください。また、link関数では、directive属性で渡されたjsonSourceを使用して関数を呼び出します。

.directive("myCarousel", function() { 
return { 
    restrict: 'EA', 

    scope: { 
     jsondatasource: '=' 
    }, 

    controller: "carouselCtrl", 
    link: function ($scope, element, attrs, ctrl) { 
     ctrl.getQuotesData(attrs.jsondatasource); 

    }, 

    template: 'mytemplate.html' 

} 
}) 
.controller('carouselCtrl', function ($scope, $http) { 

$scope.quotes = ""; 
$scope.getQuotesData = function(source) { 
    $http.get(source).success(function (data) { 
    $scope.quotes = data; 
    }); 
}; 

// some function with operation on the data on quotes received by JSON data 

}) 

Answer 4

使用 '@' の代わりに '=' ので jsondatasourceの：

は '=' jsondatasourceに変更されます： '@' は、問題が解決されるとjsondatasource値はコントローラで利用可能です。