1

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

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。

我已经尝试过这样的在线解决方案，但无法解决问题。怎么了 ？

4

2 回答 2

1

脚本.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-29T18:20:26.437 回答
0

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

您可以在此处找到更多详细信息

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

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

于 2016-12-29T18:10:41.620 回答