I study Angular and make a universal directive to call PopUp windows.
What I want: In Dom should be called through the tag

<pop-up-dialog url="loginFrame"></pop-up-dialog>

where url="loginFrame" is the identifier of the template being loaded.
Something I got confused already and I do not see how to implement it, so that the opening and closing of PopUp windows is done with the help of a single directive.

script.js

 var mainModule = angular.module("mainModule", []) var listUrl = [ { name: 'loginFrame', url: '../views/header/loginFrame.html', tag: 'showLoginPopUpDialog', tagvalue: false }, { name: 'regFrame', url: '../views/header/regFrame.html', tag: 'showRegPopUpDialog', tagvalue: false } ]; mainModule.controller('mainController', function($scope) { $scope.onLoginFrame = function(fname) { for (var i=0; i < listUrl.length; i++) { if( fname == listUrl[i].name) { listUrl[i].tagvalue = true; } } } }); mainModule.directive('popUpDialog', function() { return { //директива подставляет нужные шаблоны, эта часть работает restrict: 'E', scope: false, templateUrl: function(elem, attrs) { for (var i=0; i < listUrl.length; i++) { if( attrs.url == listUrl[i].name) { return listUrl[i].url; } } return ''; }, link: function(scope, elem, attrs) { // Здесь я хочу добавить в шаблон атрибут ng-show значение которого он будет получать через массив listUrl var attrname = 'showLoginPopUpDialog'; var pudialog = angular.element('<pudialog ng-show="'+attrname+'" pudialog></pudialog>'); elem.append(pudialog); }, } }); 
 <!-- file loginFrame.html --> <div class="login-frame-bg" pudialog> <h2>Окно авторизации</h2> <p>Close</p> </div>

  • it is not clear how this should work, open / close, what is the pudialog directive, which is both an element and an attribute at the same time? - Grundy
  • I see the work so, through the url = "loginFrame" directive substitutes the desired template and in the template adds the ng-show attribute for this template. The function call ng-click = "closePopUpDialog () and ng-click =" openPopUpDialog () change the value of the ng-show attribute. - Sergei R
  • What are the functions closePopUpDialog , openPopUpDialog ? - Grundy
  • closePopUpDialog, openPopUpDialog they are not here because I do not know yet how the ng-show attribute will be added and what will be in it. But if to use the directive for one PopUp window, then it will change the value of the element ng-show = "showPopUp" from false to true and vice versa. - Sergei R
  • What is the pudialog directive ? - Grundy

0