Angularjs传递对象指令(Angularjs passing object to direct

角新手在这里。我试图找出什么错误，同时通过对象的指令。

这里是我的指令：

app.directive('walkmap', function() { 
  return {
    restrict: 'A',
    transclude: true,
    scope: { walks: '=walkmap' },
    template: '<div id="map_canvas"></div>',
    link: function(scope, element, attrs)
    {
      console.log(scope);
      console.log(scope.walks);
    }
  };
});

而这正是我所说的指令模板：

<div walkmap="store.walks"></div>

store.walks是对象的数组。

当我运行此， scope.walks日志， undefined ，而scope记录罚款的范围，甚至有一个walks孩子的一切，我要寻找的数据。

我不知道我在做什么错在这里，因为这个确切的方法为我工作过。

编辑：

我创建了一个plunker与所需的所有代码： http://plnkr.co/edit/uJCxrG

正如你可以看到{{walks}}是在范围内都有效，但我需要访问它的连接功能，其中它仍然记录为未定义。

Answer 1:

由于您使用$resource获取你的数据，该指令的链接功能在运行前是可用的数据（因为从结果$resource是异步的），所以在链接功能在第一时间scope.walks将是空/未定义的。因为你的指令模板中包含{{}} S，角度设置了一个$watch上walks ，所以当$resource填充数据，在$watch触发器和显示更新。这也解释了为什么你看到在控制台中散步数据 - 通过一次单击链接范围扩大，数据被填充。

为了解决您的问题，在您的链接功能$watch ，知道什么时候该数据可用：

scope.$watch('walks', function(walks) {
   console.log(scope.walks, walks);
})

在您的生产代码，只需谨防它被未定义：

scope.$watch('walks', function(walks) {
  if(walks) { ... }
})

更新：如果要在使用版本棱角分明$resource支持的承诺，也看到@ sawe的答案。

Answer 2:

你也可以使用

scope.walks.$promise.then(function(walks) {
    if(walks) {
      console.log(walks);
    }
  });

Answer 3:

另一种解决方案是添加ControllerAs到，通过它可以访问该指令的变量的指令。

app.directive('walkmap', function() { 
  return {
    restrict: 'A',
    transclude: true,
    controllerAs: 'dir',
    scope: { walks: '=walkmap' },
    template: '<div id="map_canvas"></div>',
    link: function(scope, element, attrs)
    {
      console.log(scope);
      console.log(scope.walks);
    }
  };
});

然后，在您看来，通过使用可变controllerAs变量。

<div walkmap="store.walks" ng-init="dir.store.walks"></div>

Answer 4:

尝试：

<div walk-map="{{store.walks}}"></div>

angular.module('app').directive('walkMap', function($parse) {
  return {
    link: function(scope, el, attrs) {
      console.log($parse(attrs.walkMap)(scope));
    }
  }
});

Answer 5:

你宣布$ scope.store是不可见从controller..you宣布它function..so它仅在该功能，你需要这个声明以外的范围内可见：

app.controller('MainCtrl', function($scope, $resource, ClientData) {
  $scope.store=[];         // <- declared in the "javascript" controller scope
  ClientData.get({}, function(clientData) {
  self.original = clientData;
  $scope.clientData = new ClientData(self.original);
  var storeToGet = "150-001 KT";
  angular.forEach(clientData.stores, function(store){
   if(store.name == storeToGet ) {
     $scope.store = store;      //declared here it's only visible inside the forEach
     }
   });
  });
 });

文章来源: Angularjs passing object to directive