在Angular JS模式弹出窗口中加载JS文件(UibModal)

时间:2016-09-03 10:48:56

标签: jquery angularjs angular-ui-bootstrap

下面是我的js函数来加载模态弹出窗口。

$http.post(FRONT_URL+"/processGetPostContent", dataToPost)
        .success(function (response) {
            $uibModal.open({
                templateUrl: text.html,
                controller: addEditTextCtrl,
                windowClass: 'customModal',
                resolve: {
                    data: function () {
                        return response;
                    }
                }
            });
        })
        .error(function () {
            bootstrapGrowlMsg(bootstrapGrowl, ERR_AJAX, "danger");
        });

这是我的模态弹出式html文件。

<!-- Here I have included the js file, it's not loading in the modal popup file. -->
<script type="text/javascript" src="<?php echo Configure::read('Config.CDN_JS_URL') . "jquerydoc-widget-text-min.js"; ?>"></script>


<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" ng-click="dismiss(true)"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="defModalHead">{{form_title}}</h4>
</div>                                    
<form class="form-horizontal" name="frmAddEditText" id="frmAddEditText" ng-submit="text.edit == '0' ? addText(text) : editText(text)" novalidate>
    <div class="modal-body">
        <div class="row">
            <span class="col-sm-4 hidden-xs"></span>
            <span class="col-sm-8 text-red errorMsg">{{frmAddEditTextError}}</span>
        </div>
        <div class="form-group">
            <label class="col-sm-4 form-label">Content<span class="hidden-xs pull-right">:</span></label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="txtName" name="txtName" required ng-model="text.txtName" placeholder="Enter Text" ng-maxlength="100" maxlength="100" autocompleted='off' />
                <span class="email_loader"></span>
                <span class="text-red" ng-show="frmAddEditText.$submitted || frmAddEditText.txtName.$touched" ng-cloak>
                    <span ng-show="frmAddEditText.txtName.$error.required"><?= __d('admin', 'lng_msg_error_required', 'This field') ?></span>
                </span>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <div class="form-group">
            <div class="col-lg-12">
                <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="dismiss(true)">CLOSE</button>
                <button type="submit" class="btn btn-primary">SAVE</button>
            </div>
        </div>
    </div>
</form>

下面是angularjs控制器代码。

app.controller('addEditTextCtrl', function ($scope, $rootScope, $http, bootstrapGrowl, $uibModalInstance, data) {
    $scope.text = {};

    console.log(data.in_wdg_data_id);

    if (data.in_wdg_data_id == 0) // Add Flag = 0, Edit Flag = 1
    {
        $scope.text.edit = 0;
        $scope.form_title = 'Add Text';

        $scope.text.in_wdg_data_id = 0;
        $scope.text.txtName = data.st_wdg_text;
    }
    else
    {
        $scope.text.edit = 1;
        $scope.form_title = 'Edit Text';

        $scope.text.in_wdg_data_id = data.in_wdg_data_id;
        $scope.text.txtName = data.st_wdg_text;
    }

    $scope.ok = function () {
        $uibModalInstance.close($scope.selected.item);
    };

    $scope.dismiss = function () {
        $uibModalInstance.dismiss('cancel');
    };

    $scope.addEditText = function (text)
    {
        $scope.frmAddEditTextError = "";

        if ($scope.frmAddEditText.$valid)
        {
            $('#loader_placeholder').html(loader_div);

            var dataToPost = {'addedittext_detail': text}; /* PostData*/

            $http.post(TEXT_URL + 'processAddEditText', dataToPost)
                    .success(function (response)
                    {
                        $('#loader_placeholder').html('');

                        // Updating the $scope postresponse variable to update theview
                        if (response.FLAG == 1)
                        {
                            $uibModalInstance.dismiss('cancel');
                        }
                        else
                        {
                            $scope.frmAddEditFolderError = response.MSG;
                        }
                    })
                    .error(function (response) {
                        $('#loader_placeholder').html('');
                        //growl.addErrorMessage(ERR_AJAX);
                        bootstrapGrowlMsg(bootstrapGrowl, ERR_AJAX, "danger");
                    });
        }
    };
});

我发现了以下错误。

  

错误:[ng:areq] http://errors.angularjs.org/1.4.0/ng/areq?p0=addEditTextCtrl&p1=not一个功能&amp;未定义。

如果我在页面加载时加载此js文件,那么它将正常工作,但我想在模式弹出窗口打开时加载该文件。

请帮我解决这个问题。

感谢。

0 个答案:

没有答案