[angularJs] popup 使用 : angular-ui

使用 : angular-ui

預覽參考 : https://plnkr.co/edit/?p=preview

1. 加入ui-bootstrap-tpls-2.5.0.min.js
2. module include ui.bootstrap
3. 加入$uibModal
4. 建立fn  openMyModalView
5. 建立template controller

<script type="text/ng-template" id="DetailView.html">
    <div class="modal-header">
        <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body" id="modal-body">
        <ul>
            <li ng-repeat="item in ctrl.items">
                <a href="#" ng-click="$event.preventDefault(); $ctrl.selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ ctrl.selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ctrl.ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="ctrl.cancel()">Cancel</button>
    </div>
</script>
    <script>
    var DefaultApp = angular.module("Default", ['ngTable','ui.bootstrap']);
    DefaultApp.controller('RegistrationController',
        ['$scope', '$http', 'NgTableParams', '$uibModal', function ($scope, $http, NgTableParams, $uibModal) {
            console.log("test12")
 
            var self = this;
            self.List = @Html.Raw(ViewBag.Registration);
            console.log(self.List);
 
            //初始化
            self.Init = function()
            {
                self.tableParams = new NgTableParams({ count: 50 }, { dataset: self.List });
            }
            self.Init();
 
             //方法
            // ref : https://angular-ui.github.io/bootstrap
            self.openMyModalView = function (item) {
                var modalInstance = $uibModal.open({
                    templateUrl: 'DetailView.html',
                    controller: 'UserDetailCtrl as ctrl',
                    resolve: {
                        item: function () {
                            return item;
                        }
                    }
                });
 
                modalInstance.result.then(function (obj) {
                    console.log(obj)
                }, function () {
                    $log.info('modal-component dismissed at: ' + new Date());
                });
            };
 
            self.SaveHandWrite = function () {
                console.log(self.Edit);
            }
    }]
);
    //popup 事件
    angular.module('Default').controller('UserDetailCtrl', function ($uibModalInstance, item) {
        console.log(item);
        var $ctrl = this;
 
        item.Name = "test";
 
        $ctrl.ok = function () {
            $uibModalInstance.close(item);
        };
 
        $ctrl.cancel = function () {
            $uibModalInstance.dismiss('cancel');
        };
    });
    </script>