在角度js模式弹出窗口或部分视图

时间:2016-08-18 12:12:32

标签: javascript angularjs modalpopup

我正在开发angularJS应用程序并使用asp.net mvc。 我想从angularJS打开一个模态弹出窗口,然后在弹出窗口中打开#34; View" mvc的渲染。

我面临的问题是popup正在打开,但js文件未加载到模态弹出窗口中。请帮我解决在模态弹出窗口中加载js文件的问题。

    // main angular js
angular.module('PopUpModule', ['ngResource','ngRoute','ui.bootstrap', 'uigridApp'])
    .controller("ModalDemoCtrl", function ($scope, $uibModal, $log, $window) {
    $scope.open = function (size) {
                var modalInstance = $uibModal.open({
                    templateUrl: 'UiGridDemo.html',
                    controller: 'uigridCtrl',
                    size: 'lg',
                    backdrop:'static',
                    windowClass: 'app-modal-window',
                              resolve: {
                        '$uibModalInstance': function () {
                            return function () { return modalInstance; }
                        }
                    }

                });

//模态弹出窗口(mvc .cshtml文件的视图)

         //script
<script src="Script/Script2.js"></script>

       <body>
                //html code goes here
    </body>

问题是我想加载js脚本(Script2.js),它有&#34; jquery代码&#34;应该加载模态弹出窗口是mvc模式弹出窗口的视图(.cshtml)是通过angular打开的。但是它没有加载(Script2.js)。我用chrome dev.tools检查过。如何加载它有助于我这个

3 个答案:

答案 0 :(得分:0)

我认为在index.html中没有加载uigridCtrl检查是否在index.html中加载了js文件,而在open方法中无需提及controller属性。它将重新初始化控制器。

编辑 - 如果uigridCtrl与父html的控制器相同,则无需在弹出的html中提及。它将与父html共享相同的范围。

答案 1 :(得分:0)

我得到了答案,如果我在父文件中加载js文件,我将从中打开模态弹出窗口。此文件将可用于此模式弹出窗口,

答案 2 :(得分:0)

如果您不想在父控制器/指令中添加文件或修改代码,您将来可以使用我提供的解决方案。您还必须添加一些额外的参数。它运作完美,我不必对父母进行任何修改。我正在提供实时工作应用程序的代码。

 $ocLazyLoad.load({
    name: '', // Module Name - Optional
    files: [
        'viewRequestController.js',
        'request-tpl.js'
    ]
 })
 .then(function() {
    var modalInstance = $modal.open({
        templateUrl: 'viewRequest.html',
        controller: 'popupCtrl',
        controllerAs:'ctrl',
        backdrop: 'static',
        keyboard: false,
        resolve: {
            initVars: function(){
                return initVars;
            }
        }
    });

    modalInstance.result.then(
        function(response) { },
        function(response) {
            // Executes code when your modal closes.
        }
    );
});

添加$ ocLozyLoad和$ modal参数。我希望它对你有用。