Код HTML:
<my-button> <my-button> <!-- First directive, contains a button -->
<modal-data> <!-- Modal from bootstrap. It only show when my-button is clicked -->
<!--This is a part of the template, rendered with the directive
<div id="my-modal">
{{ comments }} !!!!THIS IS NOT RENDERED!!!
</div>
-->
</modal-data>
Моя первая директива
.directive('myButton', function(){
return {
restrict : 'E',
templateUrl : 'button.html',
controller : ['$scope', 'apiService', function($scope, apiService){
this.getComments = function(){
apiService.getComments()
.success(function(data){
$scope.comments = data;
});
}
}],
link : function(scope, element, attrs, ctrl){
element.on('click', function(){
ctrl.getComments();
$('#my-modal').modal();
});
}
};
})
Модальная директива: она содержит только шаблон
.directive('modalComments', function(){
return {
restrict : 'E',
templateUrl : 'modal.html'
};
});
При my-button
вызывается прослушиватель кликов в функции ссылки.
Это выполняет функцию в контроллере, которая является службой, которая берет данные из API.
выход должен быть связан с модальным, который будет всплывать.
Проблема в том, что я могу получить доступ только к этой области действия в директиве my-button
.
Может кто-нибудь сказать мне способ решить это?
РЕДАКТИРОВАТЬ
Snippet:
(function(){
angular.module('app', [])
.controller('controller', function($scope){
$scope.data = "Hello";
})
.directive('myButton', function(){
return {
restrict : 'E',
template : 'Click me',
controller : ['$scope', function($scope){
this.getData = function(){
$scope.data = "HEllo world";
};
}],
link : function(scope, element, attrs, ctrl){
element.on('click', function(){
ctrl.getData();
});
}
};
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
<my-button> {{ data }}</my-button>
{{data}}
</div>
Последующее чтение Up и Running, если эта структура хочет использоваться, необходимо создать службу.
Мы не нуждаемся в повторном использовании, но нам нужно состояние уровня аппликации. Это одна из целей Сервисов.
Вверх и бег говорит:
Вы не хотите создавать контроллер родительского уровня, который никогда не идеален для крупномасштабного, настраиваемого приложения
На мой взгляд, ваше решение плохо спроектировано. Вместо обычной кнопки вы создаете myButton. Почему бы вам не использовать:
<button ng-click="yourController.getComments()"></button>
Невозможно повторно использовать ваш myButton, потому что у него много бизнес-логики. Ваша директива sth как commentsBox не кнопка