ディレクティブのテンプレート内のディレクティブのコントローラ変数にアクセスする方法は？

テンプレート要素に変数（コントローラ内に定義された要素）を使用する必要があります。ディレクティブのテンプレート内のディレクティブのコントローラ変数にアクセスする方法は？

angular.module('home').directive('mediaTile', function(){ 
 
\t return { 
 
\t \t restrict: "AE", 
 
\t \t replace: 'true', 
 
\t \t scope: { 
 
\t \t \t media: '=', 
 
\t \t \t displayFilter: '=' 
 
\t \t }, 
 
\t \t controller: function($scope){ 
 
\t \t \t var vm = this; 
 
      vm.mediaImageActual = 'img/large-tiles.png';   } 
 
\t \t }, 
 
\t \t controllerAs: 'vm', 
 
\t \t template: \t '<div>' + 
 
\t \t \t \t \t '<img preload-image ng-src="{{vm.mediaImageActual}}">' + 
 
\t \t \t \t \t '</div>' 
 
\t }; 
 
});

<div media-tile display-filter="view.displayFilter" media="dataList.lists[0]"></div>

NG-srcがvm.mediaImageActualすなわち適切な値を取得していません。

thisのようなオンラインソリューションを試しましたが、問題を解決できませんでした。何が間違っていますか？

出典

2016-12-29 shahidbits

bindToController: trueをディレクティブに設定してみてください。

あなたは、クラスのようなオブジェクトとしてのコントローラを扱うcontrollerAs構文と一緒にhere

使用bindToController、コンストラクタとして、それらをインスタンス化し、私たちはそれらを名前空間に許可が一度場合

をインスタンス化の詳細を見つけることができますあなたはangularJs1.6以上を使用していますが、これらのすべてのプロパティがデフォルトで設定されているディレクティブの代わりにcomponentを使用できます。

出典

2016-12-29 18:10:41 Developer

このコードはOPに役立つ理由のいくつかの説明を追加してください。これにより、今後の視聴者からの回答が得られます。詳細については、[回答]を参照してください。 –

@Developer：Thanks :)しかし、残念ながら、私はangularjs 1.3を使用しています。 – shahidbits

@shahidbits - この場合、ディレクティブで 'bindToController'をtrueに設定することができます。 – Developer

cript.js

var app = angualr.module('app', []); 
app.directive('mediaTile', function(){ 
return { 
    restrict: "AE", 
    replace: 'true', 
    scope: { 
     media: '=', 
     displayFilter: '=' 
    }, 
    controller: function($scope){ 
     var vm = this; 
     vm.mediaImageActual = 'img/large-tiles.png'; 
    }, 
    controllerAs: 'vm', 
    template: '<div>{{vm.mediaImageActual}}"' + 
       '</div>' 
}; 
});

HTML

<!DOCTYPE html> 
<html data-ng-app="app"> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
    <script src="script.js"></script> 
</head> 

<body> 
<div media-tile displayFilter="view.displayFilter" media="dataList.lists[0]"></div> 
</body> 

</html>

出典

2016-12-29 18:20:26

ありがとうございました。これは、スタックオーバーフローツールで質問を編集中に追加された可能性があります。実際の問題は、ディレクティブのテンプレート内のディレクティブのコントローラで定義された変数にアクセスできません。 – shahidbits

コントローラなしで試す構文 –

コードに問題はありません。その正常に動作しますが、画像のパスが正しくない可能性があります。しかし、私は変数にアクセスすることができます。 https://plnkr.co/edit/Y2cJrUGYcygvM9i6wKx5?p=previewあなたの指示文の変数を 'script.js'で見つけるだけです。 –

ディレクティブのテンプレート内のディレクティブのコントローラ変数にアクセスする方法は？

答えて

関連する問題