Question

我的角度控制器中有一组对象，例如

[{
   label: 'label1',
   data: [{
             type: TimelineChart.TYPE.POINT,
             at: new Date([2015, 1, 1])
           }, {
             type: TimelineChart.TYPE.POINT,
             at: new Date([2015, 2, 1])
         }]
 }, {
   label: 'label2',
   data: [{
             type: TimelineChart.TYPE.POINT,
             at: new Date([2015, 1, 11])
         }, {
             type: TimelineChart.TYPE.POINT,
             at: new Date([2015, 1, 15])
         }]
 }];

每个对象都有一个Date字段。如何将这个对象数组传递给我的指令？

我尝试通过引用传递：

<div id= "chart" my-directive my-data="data"></div>
$scope: {
          myData: '='
        },
link: function($scope, $element, $attrs) {
        function init() {
          var data = $scope.myData;
          var timeline = new TimelineChart($element[0], data);
        }

        $attrs.$observe("myData", init);
      }

然而，它没有用。我得到undefined。

作为属性传入，即my-data="{{ data }}"并使用JSON.parse($attrs.myData)由于Date字段而无效。

Answer 1

将数据传递给directive非常简单。我想你缺少的是范围。您使用$scope代替scope。指令定义对象需要scope而非$scope。那么你需要做什么。

scope: { //make it scope
          myData: '='
        },
link: function($scope, $element, $attrs) {
        function init() {
          var data = $scope.myData;
          var timeline = new TimelineChart($element[0], data);
        }

        $attrs.$observe("myData", init);
      }

这是fiddle

Answer 2

我认为问题是你的数组对象在$ scope中丢失了。要进行确认，请使用console.log（$ scope.myData）;

在浏览器控制台中查看它返回的内容，如果未定义，则只需编写console.log（$ scope）;然后运行该应用程序。 转到浏览器控制台并展开$ parent，直到找到myData对象。计算父范围的数量。

如果您认为是在第3个父级下找到它，则使用

$ scope。$ parent。$ parent。$ parent.myData而不是$ scope.myData。

这将有效：）

将对象数组传递给角度指令

2 个答案: