Question

我正在Angular中创建一个产品图库指令，它允许用户使用左/右箭头滚动图像。

使用图像URL数组为指令提供最合适的角度方法是什么？

您可以假设父控制器已经进行了API调用以接收URL数组

E.g。

<div data-ng-controller="MyController as myController">
    <my-image-gallery></my-image-gallery>
</div>

我是否应该拥有JSON数组中的属性？也许是这样的事情：

<my-image-gallery images="myController.ImageList"></my-image-gallery>

虽然，我甚至不确定上述是否可行。这意味着JSON必须转换成字符串？

必须有更好的方法

修改

根据评论，我尝试了上述方法，但我无法从控制器中访问“images”字段。

以下是我在指令中定义的内容：

    scope: {
        imageSource: '='
    },

然后在我的控制器中，我假设我应该能够引用变量imageSource，不应该吗？

Answer 1

我认为您正在使用一种奇怪的教程或其他东西来学习角度。您可以使用MyController as MyController语法，但目标是避免使用$scope。我个人不同意，也不理解人们为什么要这样做。

当您将值附加到$scope时，它会直接在您的视图中显示（无需$scope）。例如，$scope.images将仅作为images传递给您的指令。

要使指令处理该值作为变量而不是字符串，必须使用=（而不是@）来定义，您可以在{{3>中阅读更多相关信息。 }}

这是一个如何工作的例子：

<强>的Javascript

angular.module('app',[])

.controller('myCtrl',['$scope',function($scope){

  $scope.imageList=['img1','img2','img3','img...'];

}])

.directive('myImageGallery',function(){
  return {
    restrict: 'E',
    scope:{
      images:'='
    },
    controller: ['$scope',function($scope){
      console.log($scope.images);
    }],
    replace: true,
    template: '<ul><li ng-repeat="img in images">{{img}}</li></ul>'
  }
})

<强> HTML

  <body ng-app="app">
    <div ng-controller="myCtrl">
      <my-image-gallery images="imageList"></my-image-gallery>
    </div>
  </body>

这是一个angular directive docs。

AngularJS - 为子指令

修改

1 个答案: