popupwidget

by Anton Repjov

HTML

<div ng-controller="mainCtrl">
    <div ng-controller="popCtrl">
        <popover ng-show="currentPopover == 1" >
            <popover-item save="save(data)" hide="hide()"></popover-item>
        </popover>
        <popover ng-show="currentPopover == 2">
            <popover-item-two save="save(data)" hide="hide()"></popover-item-two>
        </popover>
        <button ng-click="showPopover(1)">Show me Text widget</button>
        <button ng-click="showPopover(2)">Show me Paragraph widget</button>
    <div>
</div>

CSS

.popup {
    color: red;
    border: 2px solid #c1c1c1;
    text-align:center;
}
.popup p {
    background: #ccc;
}
.popupitem {
    color: blue;
}

JavaScript

var app = angular.module('app', []);
app.controller('mainCtrl', ['$scope',function($scope) {
  
}])
app.controller('popCtrl', ['$scope',function($scope) {
    $scope.currentPopover;
    $scope.showPopover = function(id) {
        $scope.currentPopover = id;
    }
    $scope.hide = function() {
        console.log("hidding");
        $scope.currentPopover = null;
    }
    
    $scope.save = function(data) {
        console.log ('parentCtrl', data);
    }
}])

//service
.factory('popoverAPI', function() {
    var api = {
        //do something
    }
    return  api;
})
.directive('popover', function(){
    return {
        restrict: 'E',
        transclude: true,
        scope: true,
        template: '<div class="popup"><p>I am popover</p><div ng-transclude></div></div>',
        link: function(scope, element, attrs) {

        }
    }
})
.directive('popoverItem', function(){
    return {
        restrict: 'E',
        scope: true,
        scope: {save: '&', hide: '&'},
        template: '<div class="popupitem"><input type="text" ng-model="data.name"></div><div class="buttons"><button ng-click="hide()">close</button><button ng-click="save({data: data})">save</button>',
        link: function(scope, element, attr) {
            
        },
        controller: function($scope) {
            $scope.data = {name: "test"};
        }
    }
})
.directive('popoverItemTwo', function(){
    return {
        restrict: 'E',
        template: '<div class="popupitem"><div><input type="text" placeholder="email" ng-model="data.email"></div><div><input type="password" placeholder="password" ng-model="data.password"></div></div><div class="buttons"><button ng-click="hide()">close</button><button ng-click="save({data: data})">save</button>',
        controller: function($scope) {
            $scope.data = {
                email: '',
                password: ''
            }
        }
    }
})