Question

需要在模板元素中使用变量（在指令的控制器元素内定义）。

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>'
	};
});

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

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

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

Answer 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>

Answer 2

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

您可以找到更多详情here

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

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

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

2 个答案: