使用angularjs弹出一个html页面到另一个html页面

时间:2017-12-20 04:36:17

标签: html angularjs bootstrap-modal

我正在使用angularjs。我需要在弹出/模态中打开另一个html页面。实际上需要一个带脚本(角度控制器)的常见html页面,它可以从不同的多视图页面打开作为模态/弹出窗口,也可以在模态中进行CRUD。

<div><button data-ng-click="openModal()">Click</button></div>

并在控制器中

$scope.openModal = function(){  // Do something to open another html view page in a modal    }

此外,我还需要将一些信息从当前UI发送到模态UI作为参数。

2 个答案:

答案 0 :(得分:3)

var app = angular.module('someapp');
$scope.openModal = function(){
    var modalInstance = $uibModal.open({
        templateUrl: 'xyz.html',
        controller: 'someconroller',
        resolve: {
            argumentToSend: function () {
                return 'sample-text';
            }
        }
    });

    modalInstance.result.then(function (returnedItem) {
        console.log(returnedItem);
    }, function () {
    })
};

app.controller('someconroller', ['$scope', '$uibModalInstance', 'argumentToSend', function ($scope, $uibModalInstance, argumentToSend) {
    console.log(argumentToSend);
    //You can call your services,apis for crud operations here
    $scope.exit = function () {
        $uibModalInstance.close(returnedItem);
    };
}]);

答案 1 :(得分:0)

试试这个。

   $scope.openModal = function(){ 
    $scope.inserted = {
                    //data which you want to display on modal
                };

    var modalInstance = $uibModal.open({
            animation: true,
            templateUrl: path to your html,
            scope: $scope,
            size: "Modelwidth",
            controller: //controller name,
            resolve: {
                items: function () {
                    $scope.inserted
                }
            }
        });
  }