2017年11月16日 星期四

How to call Modal Dialog (Window) on Umbraco AngularJs

How to call Modal Dialog (Window) on Umbraco AngularJs 


Background
- angularjs v1.x


view.html

<div ng-controller="myController">
    <div>
        <button ng-confirm-click="Custom Message" class="btn" confirmed-click='confirmclick()' cancel-click='cancelClick()' >Test</button>        
    </div>
</div>


directive

'use strict';
var umbracoApp = angular.module('umbraco.directives');

umbracoApp.directive('ngConfirmClick', function () {
    return {        
        link: function (scope, element, attrs) {
            var msg = attrs.ngConfirmClick || "Are you sure?";
            var confirmClickAction = attrs.confirmedClick;
            var cancelClickAction = attrs.cancelClick;
            element.bind('click', function (event) {
                if (window.confirm(msg)) {
                    scope.$eval(confirmClickAction)                    
                }
                else
                {
                    scope.$eval(cancelClickAction)
                }
            });
        }        
    };
});

controller

'use strict';

(function () {
    // Create controller variable
    function MyController($scope) {        

        $scope.confirmclick = function (element) {
            alert("confirm clicked");
        };

        $scope.cancelClick = function (element) {            
            alert("cancel clicked");
        };        

    // Register the controller    
    angular.module("umbraco").controller("myController", MyController);
})();

沒有留言:

張貼留言