Question

我想将一些数据从控制器传递给指令，所以首先是指令：

.directive('myDirective', function() {
  'use strict';

  return {
    restrict: 'EA', 
    // templateUrl here
    controller: DataController,

    link: function(scope, elem, attrs, ctrl) {

        var data = ctrl.data,

        config = {
          data: data,
          xkey: 'y',
          ykeys: ['a', 'b'],
          // ... more code here
        };
      //.. more  irrelevant code
   }
};

当我放置这样的数据时，效果很好：

nslive.controller('DataController', ['Data', 'socketio', '$routeParams', DataController]);

function DataController(Data, socketio, $routeParams) {
  'use strict';

  var vm = this;

  vm.data = [
    {y: '2014', a: 12500, b: 38000}, {y: '2015', a: 10500, b: 27000},
    {y: '2016', a: 38640, b: 13545}, {y: '2017', a: 38640, b: 13000}
  ];

  // more code here
}

但是，当我将它放在像这样的'.success（）'回调函数中时，指令无法看到数据：

nslive.controller('DataController', ['Data', 'socketio', '$routeParams', DataController]);

function DataController(Data, socketio, $routeParams) {
  'use strict';

  var vm = this;
  vm.urlJobname = $routeParams.jobname;

  Data
    .all(vm.urlJobname)
    .success(function(data) {
      console.log('I got here!'); // this is shown successfully in the chrome console
      vm.data = [
        {y: '2014', a: 12500, b: 38000}, {y: '2015', a: 10500, b: 27000},
        {y: '2016', a: 38640, b: 13545}, {y: '2017', a: 38640, b: 13000}
      ];
    });
}

我认为它与变量范围有关，但不知道如何设置这样的全局变量，请指教。感谢。

Answer 1

这是因为编译了指令并且在promise / request返回成功消息之前执行了ink函数，所以它会被编译，我建议将你的逻辑包装在$ watch中并在第一次执行后清除该表

所以这将是你的链接功能

function(scope, elem, attrs, ctrl){
   scope.clearWatch = scope.$watch(function(){return ctrl.data;},function(newVal){
       if(newVal){
          //your logic goes here ,, we are sure that ctrl.data has value here
         // here we call clearWatch to stop watching on that value
         scope.clearWatch();
       }
   });
}

Answer 2

指令：

scope: {
          object: '='
       }

最佳做法是使用Controller指令，而不是将其置于link函数中。

在Controller指令中：

$scope.$watch('object', function (){
      // do something with data
});

在HTML中：

<my-directive object=objectFromController></my-directive>

在控制器中：

$scope.objectFromController = data;

在控制器中设置变量，可以通过指令查看

2 个答案: