API : Options

Options

Before using ngPopup, option must be defined in controller:

<ng-pop-up option="ngPopupOptions"></ng-pop-up>

angular.module('app',function($scope){
    $scope.ngPopupOptions = {
        modelName : "myDialog",
        width : 100,
        height : 100,
        template: "<div>Hello World!</div>",
        templateUrl : "https://github.com",
        resizable : true,
        draggable : true,
        position : {
            top : 100,
            left : 100
        },
        title : "",
        hasTitleBar : true,  
        pinned : false,
        isShow : true,
        onOpen : function(){},
        onClose  : function(){},
        onDragStart : function(){},
        onDragEnd : function(){},
        onResize : function(){}
    }
})

####modelName
Type: string
Used to define dialog's name This property has been deprecated since v0.4.0

####width
Type: number or string
Set dialog's width (default 100), ngPopup supports width two-way binding, you can do some thing like:

<input ng-model="ngPopupOptions.width">

if you want to use percentage, just pass a percentage string into it, like width = "30%"

####height
Type: number or string
Set dialog's height (default 100), ngPopup also support height two-way binding
if you want to use percentage, just pass a percentage string into it, like height = "30%"
####template
Type: string
HTML markup string, would be compiled by $compile service, and append to dialog content
If you set template and templateUrl at same time, both HTML markup would be compiled into dialog, templateUrl contents would be inserted after template contents. ####templateUrl
Type: string
This is similar to template but the template is loaded from the specified URL asynchronously,
If you set template and templateUrl properties at same time, both HTML markup would be compiled into dialog, templateUrl contents would be inserted after template contents.
####resizable
Type: boolean
Determine if dialog is resizable, ngPopup supports resizable two-way binding
####draggable
Type: boolean
Determine if dialog is draggable, ngPopup supports draggable two-way binding
####title
Type: string
Set dialog title, ngPopup supports title two-way binding ####hasTitleBar
Type: boolean
Determine if dialog has a title bar. ngPopup supports hasTitleBar two-way binding
it is useful when you want to create a modal or popover dialog without a title bar on it
####position
Type: object
Set dialog position by top and left properties, ngPopup supports position two-way binding.
position is NOT accept percentage value.
####pinned
Type: boolean
If pinned set to true, dialog would be have fixed position, ngPopup supports pinned two-way binding
####isShow
Type: boolean
Used to show/hide dialog, ngPopup supports isShow two-way binding ####onOpen
Type: function
Specify the callback function on dialog opening
####onClose
Type: function
Specify the callback function on dialog closing ####onDragStart
Type: function
Specify the callback function on starting drag dialog
####onDragEnd
Type: function
Specify the callback function when dialog dragging end
####onResize
Type: function
Specify the callback function when dialog resizing