Question

我按照http://plnkr.co/edit/bDqAll8CYwu7DGfSs7FC?p=preview

中的示例使用角度模态

这是我的app.js和controller代码

app.js

var app = angular.module("app", ['trNgGrid', 'ngAnimate', 'ngRoute', 'treasure-overlay-spinner', 'ui.bootstrap']);

app.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
        when('/Employee/', {
            templateUrl: '/app/views/Employee.html'
        }).
        otherwise({
            redirectTo: '/Employee'
        });
    }]);

Controller code

angular.module('app').controller('EmployeeController',['$scope','$modal','appService', function ($scope, $modal, appService) {


    var employeesList = appService.GetEmployess();
    var modalInstance;


    $scope.clickMe = function () {
        modalInstance = $modal.open(
                {
                    templateUrl: '/app/views/EditEmployee.html',
                    resolve: {
                        callerData: function () { }
                    }
                })
        modalInstance.result.then(function () { });
    }

    $scope.cancel = function () {
        modalInstance.close('closed result');
    };

    $scope.spinner = {
        active: true
    };
    employeesList.then(function successCallback(response) {
        $scope.Employees = response.data;

    }, function errorCallback(response) {

    }).finally(function () {
        $scope.spinner = {
            active: false
        };
    });

}]);

这是我的HTML代码，我在呼叫控制器

<div ng-controller="EmployeeController">
    <input type="button" ng-click="clickMe()" value="Click" />
    <input type="button" ng-click="cancel()" value="cancel" />
    <treasure-overlay-spinner active='spinner.active'>
        <table tr-ng-grid='' items='Employees' page-items="10"></table>
    </treasure-overlay-spinner>
</div>

我按照plunker中建议的示例尝试但无法隐藏模态，所以可以让我知道如何正确地集成它

Answer 1

我按照以下方式更改了控制器并按预期工作

angular.module('app').controller('EmployeeController', function ($scope, $modal, appService) {

    var employeesList = appService.GetEmployess();

    $scope.spinner = {
        active: true
    };
    employeesList.then(function successCallback(response) {
        $scope.Employees = response.data;

    }, function errorCallback(response) {

    }).finally(function () {
        $scope.spinner = {
            active: false
        };
    });

    $scope.open = function (size) {

        var modalInstance = $modal.open({
            templateUrl: '/app/views/EditEmployee.html',
            controller: ModalInstanceCtrl,
            size: size,
            scope: $scope

        });
        console.log(modalInstance);


        modalInstance.result.then(function (selectedItem) {
            console.log('closed :' + selectedItem);
        }, function () {
            console.log('canceled');
        });
    };

    $scope.otherFunction = function () {
        console.log('otherFunction');
        //DO SOME STUFF 
        //....
        //THEN CLOSE MODAL HERE
    }
});


var ModalInstanceCtrl = function ($scope, $modalInstance) {

    $scope.ok = function () {
        console.log('var var: ' + $scope.VARCONTROLLER);
        $modalInstance.close('closed result');
    };

    $scope.cancel = function () {
        console.log('cancel cancel');
        $modalInstance.dismiss('cancel');
    };
};

Answer 2

很抱歉，但我无法在您的代码中看到您是如何尝试实施模态视图的。

在您的示例中，它是由此创建的：（HTML :)

 <button ng-click="open()" class="btn btn-default">MODAL3</button>
   <script type="text/ng-template" id="myModalContent2.html">
            <div class="modal-header">
                <h3 class="modal-title">I'm a modal3!</h3>
            </div>
            <div class="modal-body">
                    <h3>MODAL TITLE</h3>
                         <button ng-click="otherFunction()" class="btn btn-default">Do stuff</button>

            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">OK</button>
                <button class="btn btn-warning" ng-click="close()">Cancel</button>
            </div>
 </script>

进入控制器（app.js）：

$scope.open = function (size) {

            var modalInstance = $modal.open({
              templateUrl: 'myModalContent2.html',
              controller: ModalInstanceCtrl,
              size: size,
              scope: $scope

            });
            console.log(modalInstance);


            modalInstance.result.then(function (selectedItem) {
              console.log('closed :'+selectedItem);
            }, function () {
               console.log('canceled');
            });
        };

      $scope.otherFunction = function () {
        console.log('otherFunction');
        //DO SOME STUFF 
        //....
        //THEN CLOSE MODAL HERE
      }

编辑：我在你的控制器中看到你如何尝试使用open（）等来打开模态视图，但是它没有定义（用它的脚本部分）到html中

EDIT2：这是我使用模式的方式：（控制器内的控制器.js）

        $scope.set = function() {
            $scope.modal.hide();                
        }   
        $scope.cancel = function() {
         //this is my function inside modal
            $scope.modal.hide();
        }           
            $scope.showModal = false;
                $scope.show = function(){
                $scope.showModal = !$scope.showModal;
            };

            $ionicModal.fromTemplateUrl('modal3.html', function(modal) {
                $scope.modal = modal;   

              }, {
                animation: 'slide-in-up',
                focusFirstInput: true,
                scope: $scope
              });

在我的html中，就像在示例中一样，在按钮下打开：

<button class="row header" ng-click="modal.show()">mymodal</button></td>
<script id="modal3.html" type="text/ng-template">
      <div class="modal">     
      *...stuff...*    
      </div>
</script>

角度模态无法关闭

2 个答案: