在没有$scope的指令中引用作用域变量

Angular - Reference scope variable in directive without $scope?

本文关键字：引用 作用域 变量 指令 scope      更新时间：2023-09-26

我试图在一个数组中显示第一个图像，这是馈送到我的指令，但是，我不明白为什么这不起作用。你能解释一下吗?

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]访问指令的隔离$作用域。你的img标签也缺少右括号>。

这是您在vm控制器中访问images的方式:

scope:{
  images: '='
},
controller: function($scope) {
  this.images = $scope.images;
},
controllerAs: 'vm',
template: '<ul><li><img ng-src="{{vm.images[0]}}"></li></ul>'

你可以使用bindToController来自动绑定指令的隔离作用域到控制器。只要确保你有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>'
  };
});
相关文章：