Добрый день!
Пишу модальное окно на ангуляре. Проблема в том, что не знаю, как правильно прокинуть $scope контроллера к директиве, которая создаётся динамически, с помощью другой директивы.
Сейчас делаю так: передаю из директивы modal $scope через сервис, а в modalWindow получаю так $scope.$parent.attrs.scope
Подскажите как можно сделать нормально ?
angular.module('App').controller('controller', controller);
function controller($scope, $http) {
$scope.validate = function(){
console.log('validate');
};
}
angular.module('App').service('modalService', ModalService);
function ModalService($compile, $timeout, $rootScope, $templateRequest) {
return function(content, option){
$templateRequest('/popup.template.html').then(function(response){
var newScope = $rootScope.$new(true);
var clone;
newScope.attrs = option || {};
clone = $compile(response)(newScope);
angular.element(document.body).append(clone);
});
}
}
angular.module('App').directive('modal', ModalDirective);
function ModalDirective(modalService) {
return {
scope: true,
restrict: 'EA',
link: function ($scope, $element, $attr) {
$element.on('click', function (event) {
event.preventDefault();
modalService('content', {
scope: $scope,
title: $attr.title,
contentUrl: $attr.contentUrl
});
});
}
}
}
angular.module('App').directive('modalWindow', ModalWindow);
function ModalWindow($timeout, $log, $templateRequest, $compile) {
return {
restrict: 'E',
scope: true,
link: function ($scope, $element) {
$scope.loading = false;
// Загружаем содежимое по адресу для всплывающего окна
if ( $scope.$parent.attrs.contentUrl ) {
$templateRequest($scope.$parent.attrs.contentUrl).then(function(response){
var clone = $compile(response)($scope);
$element.find('.modal-body').html(clone);
$scope.show();
});
}
// Вставляем содержимое для окна
if ( $scope.$parent.attrs.content ) {
var clone = $compile($scope.$parent.attrs.content)($scope);
$element.find('.modal-body').html(clone);
$scope.show();
}
},
controller: function ($scope, $element) {
$scope.validate = $scope.$parent.attrs.scope.validate;
$scope.show = function () {
$scope.visible = true;
$scope.loading = false;
$element.addClass('in');
};
$scope.hide = function () {
$scope.loading = false;
$scope.visible = false;
$timeout(function () {
$element.remove();
}, 3000)
};
$scope.startLoading = function() {
$timeout(function() {
if (!$scope.visible) {
$scope.loading = true;
}
}, 300);
}
}
}
}
<div class="menu-actions-add pull-left" ng-controller="controller">
<modal data-title="title" data-content-url="/template.html">
modal
</modal>
</div>
