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

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 returns 成功消息之前编译了指令并且执行了 ink 函数, 所以它会被编译，我建议将你的逻辑包装在一个 $watch 中，并在第一次执行它后清除那个 watch

所以这将是您的 link 函数

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 函数中。

在控制器指令中：

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

在HTML中：

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

在控制器中：

$scope.objectFromController = data;

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

Set variable in controller that can be seen by directive

variables

scope

controller

directive

angularjs