如何在指令的模板中访问指令的控制器变量？答案

【问题标题】：How to access directive's controller variables in directive's template?如何在指令的模板中访问指令的控制器变量？
【发布时间】：2017-05-14 02:09:05
【问题描述】：

需要在template元素中使用变量（定义在指令的controller元素内）。

angular.module('home').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>' +
					'<img preload-image ng-src="{{vm.mediaImageActual}}">' +
					'</div>'
	};
});

&lt;div media-tile display-filter="view.displayFilter" media="dataList.lists[0]"&gt;&lt;/div&gt;

ng-src 没有得到正确的值，即 vm.mediaImageActual。

我尝试了this 等在线解决方案，但无法解决问题。怎么了？

【问题讨论】：

标签： angularjs angularjs-directive angularjs-controlleras

【解决方案1】：

script.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>

【讨论】：

谢谢 Charan，是的，你是对的，有一个额外的 '}'。这可能是在堆栈溢出工具中编辑问题时添加的。实际问题是我无法访问指令模板中指令控制器中定义的变量。
尝试不使用controllerAs语法
你的代码没有问题。它工作正常，但图像的路径可能不正确。但我能够访问变量。 plnkr.co/edit/Y2cJrUGYcygvM9i6wKx5?p=preview 只需在 script.js 中找到您的指令变量即可

【解决方案2】：

尝试在指令中设置bindToController: true。

您可以找到更多详情here

将 bindToController 与 controllerAs 语法一起使用，它将控制器视为类对象，将它们实例化为构造函数，并允许我们在实例化后为其命名空间

如果您使用的是 angularJs1.6 或更高版本，您可以使用 component 而不是默认设置所有这些属性的指令

【讨论】：

请添加一些解释为什么此代码有助于 OP。这将有助于为未来的观众提供一个可以学习的答案。请参阅How to Answer 了解更多信息。
@Developer：谢谢 :) 但不幸的是，我使用的是 angularjs 1.3。
@shahidbits - 在这种情况下，您可以在指令中将 bindToController 设置为 true