如何訪問指令模板中的指令控制器變量？

需要在模板元素中使用變量（在指令的控制器元素內定義）。如何訪問指令模板中的指令控制器變量？

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。

你可以找到更多的細節here

使用bindToController一起controllerAs語法，它把控制器爲Class類對象，實例化他們作爲建設者和允許我們它們的命名應該實例化一次

如果您正在使用angularJs1.6或更高版本，您可以使用component而不是指令，默認情況下，所有這些屬性都設置爲

來源

2016-12-29 18:10:41 Developer

請新增爲什麼這個代碼有助於OP一些解釋。這將有助於提供未來觀衆可以從中學習的答案。有關更多信息，請參閱[答案]。 –

@Developer：謝謝:)但不幸的是，我使用的是angularjs 1.3。 – shahidbits

@shahidbits - 在這種情況下，您可以在指令 – Developer

s 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

中將'bindToController'設置爲true謝謝查蘭，是的，您是對的，還有一個額外的'}'。這可能是在編輯堆棧溢出工具中的問題時添加的。實際的問題是我無法訪問指令模板中的指令控制器中定義的變量。 – shahidbits

嘗試不使用控制器語法 –

代碼沒有問題。它的工作正常，但圖像的路徑可能不正確。但我能夠訪問變量。 https://plnkr.co/edit/Y2cJrUGYcygvM9i6wKx5?p=preview只需在'script.js'中找到你的指令的變量 –

回答

相關問題