将复杂数据传递给 ng-directive

Question

我正在尝试在 Angular 中构建自定义指令；它需要在渲染页面之前对传递给它的数据进行处理，因此我需要通过属性获取传递给我的指令的数据并做一些事情，最后渲染页面。

.directive('lpcEdiTable', function($interpolate) {
        return {
            restrict: "E",
            templateUrl: "...",
            replace: false,
            scope: {
                collection: "="
            },
            link: function(scope, elem, attr) {
                //here i need to retrieve data
                var myColl = scope.collection; //it's not working
                //do some stuff here on myColl
                scope.collection = myColl;
            }
        };
    });

所以这是我使用指令的方式：

<lpc-edi-table collection="products"></lpc-edi-table>

其中products 是一个复杂对象。

在指令模板中，我将后期阐述数据用于ng-repeat 和其他内容

我尝试关注this，但无法将数据检索到link 函数中

Answer 1

这是一个将对象传递给指令的示例

angular.module("myModule", [])
.controller("baseController", ['$scope', function($scope) {
  $scope.products = [
        "asd", 
        "asdasd"
    ];
}])

.directive('myDirective', function() {
  return {
    restrict: "E",
    template: "<p ng-repeat='item in collection'>{{item.attr}}</p>",
    scope: {
      collection: "="
    },
    link: function(scope, elem, attr) {
      if (!attr.collection) throw new Error("lpc-edi-table directive: 'collection' attribute not found!");
      scope.collection = scope.collection.map(function(a) { return {attr: a} });

      console.log(scope.collection);


    }
  };
});

你可以像

这样调用你的指令

<my-directive collection="products"></my-directive>

演示https://plnkr.co/edit/cj4oSPRiNo8iYfinIztT?p=preview

Answer 2

对于 Angular 1.6，我推荐using components。特别是如果您不需要进行高级 DOM 操作。

app.component('lpcEdiTable', {
    // $ctrl is controller instance
    template: '<div ng-repeat="object in collection">{{object | json}}</div>',
     bindings: { //custom attributes
         collection: '<' //one way binding. Can also be two way =
     },
     controller: function(){
         //$onInit gets called when the bindings are ready
         this.$onInit = function(){
             // this.collection is now ready
             // safe to manipulate
         };
      }
});

这可以像这样使用：

<lpc-edi-table collection="products"></lpc-edi-table>