我正在尝试显示输入到我的指令的数组中的第一个图像，但是，我不明白为什么这不起作用。能解释一下吗？
Script.js 文件:
angular.module('app',[])
.controller('MyController', function() {
var self = this;
self.imageList=[
'https://upload.wikimedia.org/wikipedia/commons/3/3d/Polar_Bear_AdF.jpg',
'http://www.polarbearsinternational.org/sites/default/files/styles/media_full/public/00473-10104_0.jpg?itok=uv9Mr5rz',
'http://www.polarbearsinternational.org/sites/default/files/styles/inside_full/public/sca-000005.jpg?itok=7HybQm2o'
];
})
.directive('myImageGallery', function(){
return {
restrict: 'E',
scope:{
images: '='
},
controller: function() {
},
controllerAs: 'vm',
template: '<ul><img images="vm.images" ng-src={{ vm.images[0] }}</li></ul>'
}
})
HTML:
<body ng-app="app">
<div ng-controller="MyController as myCtrl">
<my-image-gallery images="myCtrl.imageList"></my-image-gallery>
</div>
</body>
最佳答案
您只需将模板更正为:
template: '<ul><li><img ng-src="{{images[0]}}"></li></ul>'
您缺少 ng-src 属性周围的引号 ""，您可以直接使用 images[0] 访问指令的isolate $scope。您的 img 标签也缺少右括号 >。
这是您在 vm Controller 中访问图像的方法:
scope:{
images: '='
},
controller: function($scope) {
this.images = $scope.images;
},
controllerAs: 'vm',
template: '<ul><li><img ng-src="{{vm.images[0]}}"></li></ul>'
您可以使用bindToController自动将指令的隔离范围绑定(bind)到 Controller 。只需确保 Controller 属性存在，否则会抛出错误。
.directive('myImageGallery', function(){
return {
restrict: 'E',
scope:{
images: '='
},
controller: function() {},
controllerAs: 'vm',
bindToController: true,
template: '<ul><li><img ng-src="{{vm.images[0]}}"</li></ul>'
};
});
关于javascript - Angular - 指令中的引用范围变量没有 $scope？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32929239/