Multiple AngularJS directives with different scopes -
hi have 2 popup directives on same page. problem when click on 1 both pop up.
how can isolate each scope each other popup that's clicked pops up?
html
<popup class="popup"> <trigger> <a href="#" data-ng-click="showpopup()">show popup</a> </trigger> <pop> popped </pop> </popup> <popup class="popup"> <trigger> <a href="#" data-ng-click="showpopup()">show popup</a> </trigger> <pop> popped </pop> </popup> popup.js
angular.module('sembaapp') .directive('popup', function () { return { restrict: 'e', replace: true, transclude: true, template: '<div data-ng-transclude></div>', controller: function postlink($scope, $element, $attrs) { $scope.popup = false; $scope.showpopup = function() { $scope.popup = !$scope.popup; } } } }) .directive('trigger', function () { return { require: '^popup', restrict: 'e', replace: true, transclude: true, template: '<div data-ng-transclude></div>', } }) .directive('pop', function () { return { require: '^popup', restrict: 'e', replace: true, transclude: true, template: '<aside data-ng-transclude data-ng-show="popup"> yay</aside>' } });
it might better idea simplify directives scopes easy handle.
<div ng-app="sembaapp" ng-init="popup1=false;popup2=false;"> <popup class="popup" ng-model="popup1"> <pop data-ng-show="popup1">i popped up</pop> </popup> <popup class="popup" ng-model="popup2"> <pop data-ng-show="popup2">i popped too</pop> </popup> </div> angular.module('sembaapp', []) .directive('popup', function () { return { scope:{ ngmodel: '=' }, restrict: 'e', replace: true, transclude: true, template: '<div data-ng-transclude><a href="#" data-ng-click="showpopup()">show popup</a></div>', link: function postlink($scope, $element, $attrs) { $scope.showpopup = function () { console.log($scope.ngmodel); $scope.ngmodel = !$scope.ngmodel; } } } })
Comments
Post a Comment