Передача данных от контроллера к директиве

Question

Я пытаюсь обрабатывать данные, поступающие из моей базы данных в директиве, однако эти данные в настоящее время запряженного контроллером и быть присвоенными сферы, как это:

Календаря контроллер:

'use strict'; 
var CalendarController = ['$scope', 'EventModel', function(scope, EventModel) { 

    scope.retrieve = (function() { 
     EventModel.Model.find() 
      .then(function(result) { 
       scope.events = result; 

      }, function() { 

      }); 
    }()); 

}]; 


adminApp.controller('CalendarController', CalendarController); 

Директива Календарь:

'use strict'; 
var calendarDirective = [function($scope) { 

    var Calendar = { 
     init: function(events) { 
      console.log(events); 
     } 
    }; 

    return { 
     link: function(scope) { 
      Calendar.init(scope.events); 
     } 
    }; 
}]; 

adminApp.directive('calendarDirective', calendarDirective); 

Но данные не определен в директиве, а в контроллере данные появляются, чтобы быть в порядке.

Спасибо!

Answer 1

Это распространенная ошибка для людей, начинающих работу с AngularJS. Это проблема порядка загрузки. Переменная области событий не определяется, когда выполняется функция ссылки. Одним из решений является использование часов для переменной, переданной в директиву, и загрузки после ее определения.

return { 
    link: function(scope) { 
     scope.$watch('events', function() { 
      if(scope.events === undefined) return; 

      Calendar.init(scope.events); 
     }); 
    } 
}; 

Answer 2

В приведенном выше сценарии контроллер и директивы имеют изолированный объем. Одним из решений будет использование фабрики/службы для связи с сервером и ввода службы в контроллер и директиву. Поскольку сервис/фабрика является одноточечным, вы можете кэшировать данные. & доля между контроллерами &.

Answer 3

попробуйте этот способ.

Директива HTML

<calendar-directive objEvent="events" ></calendar-directive > 

JS:

'use strict'; 
var calendarDirective = [function($scope) { 


    return { 
     scope : { objEvent : '=objEvent'} 
     template: '<div>{{ objEvent }}</div>', 
    }; 
}]; 

Используйте угловые isolated scopes.