如何使用角范围与服务请求和指令

I have a controller that queries a service, like so:

我有一个查询服务的控制器，比如:

app.controller('CandListCtrl', ['$scope', 'Cand',
  function ($scope, Cand) {

    Cand.query(function(data) {
      //data processing can happen here
      $scope.candidates = data;
    });

  }]);

My service queries a Google sheet:

我的服务查询谷歌表:

var sheetServices = angular.module('candServices', []);

    sheetServices.factory('Cand', ['$rootScope',
      function($rootScope){
        return {
          query: function(callback) {
            Tabletop.init({
              key: '{{my key}}',
              simpleSheet: true,
              parseNumbers: true,
              callback: function(data, tabletop) {
                if(callback && typeof(callback) === "function") {
                  $rootScope.$apply(function() {
                    callback(data);
                  });
                }
              }
            });
          }
        };
      }]);

My directive:

我的指令:

app.directive('timeline', function () {

  return function (scope, element, attrs) {

      var events = scope.candidates;
      console.log(events); //undefined
 }
})

I use the timeline directive in route partial view:

我在route部分视图中使用了时间轴指令:

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/cand-list.html',
        controller: 'CandListCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

cand-list.html:

<div id="timeLine"><div timeline ng-style="myStyle"></div></div>

My issue is that I cannot access $scope.candidates from within my directives because it is scoped to the query function.

我的问题是我不能访问$scope。来自我的指令中的候选项，因为它的作用域是查询函数。

I could of course create a closure that draws the variable value out of the function. But that seems un-Angular.

我当然可以创建一个闭包，从函数中提取变量值。但这似乎un-Angular。

What is the best way forward?

前进的最佳途径是什么?

2 个解决方案

#1

You need to learn how to communicate b/w directive and controller First you need to create a seperate scope of the directive and allow it to access data from the controller scope by using '=','@' etc.

您需要首先学习如何与b/w指令和控制器通信，您需要创建该指令的独立范围，并允许它使用'='、'@'等从控制器范围访问数据。

Suppose your html is this:

假设您的html是:

<div>
   <timeline candidates="candidates"></timeline>
</div>

And your javascript:

和你的javascript:

app.directive('timeline', function () {

  return {
    scope:{
      candidates:"="
    },

    link:function (scope, element, attrs) {
     scope.$watch('candidates', function() { 
              var events = scope.candidates; 
              console.log(events); 
         }) 
    }
  }
})

Good Example Read more about directives on the documentation

好的例子阅读更多关于文档的指令。

#2

You can use an event emitter:

您可以使用事件发射器:

Cand.query(function(data) {
  // data processing can happen here
  $scope.candidates = data;
  // tell everyone that data is loaded
  $scope.$root.$broadcast('Cand.loaded', data);
});

And in your directive:

和你的指令:

app.directive('timeline', function () {
  return function (scope, element, attrs) {
    scope.$on('Cand.loaded', function(e, data) {
       var events = data;
       console.log(events); //defined
    });
  }
})

#1