如何在AngularJS中创建一个对话框，但只加载来自服务器的对话框内容

Posted 2021-04-18

我知道这可能是一个简单的问题，但我在这里感到沮丧，我无法让它发挥作用。我是AngularJS的新手，我正在尝试使用以下条件实现模态对话框（或找到一个）：

1. 对话框内容可能来自任何地方 - 字符串模板，脚本模板或URL中的模板
2. 对话框标题和操作将来自调用者，而不是被调用者。换句话说，父作用域决定了模式对话框中应存在的标题和操作按钮（我发现许多对话框封装了模板本身的标题和操作按钮，例如this one）
3. 模板的内容应完全独立于父作用域（调用者）。事实上，它甚至可能不会写在AngularJS中。它可能使用jQuery。
4. 如果加载的模板在AngularJS中，它应该封装其控制器。例如，ng-include不喜欢<script>标签。 有一个解决方法（here，here和here），但用text/javascript-lazy装饰脚本标签的想法是非常臭和脏，更不用说我希望内容html是自包含和可执行的，以防它没有加载AngularJS模式对话框的内容。
5. 父作用域和内容之间的通信应该通过一个共同的合同来完成（我想到的是JavaScript事件）

我试过ngDialog，但问题是容器应该将controller传递给加载的模板。那不是我想要的。在Bootstrap对话框中，it seems还必须将controller从父作用域传递到对话框内容。这打破了封装的概念。这是不可取的。而且，它取决于对话结果，这也是不可取的。

答案

我建议使用Angular-UI库。您可以轻松创建任何对话框“Twitter Bootstrap”：

在页面头部包含js。

<script src="/desktop/libs/angular-bootstrap/ui-bootstrap.js"></script>
<script src="/desktop/libs/angular-bootstrap/ui-bootstrap-tpls.js}"></script>

在应用初始化时包含模块。

var Application = A.module('MyApp', [ 'ui.bootstrap', 'ui.bootstrap.modal' ]);

注入日控制器$ modal：

(function (A){
    "use strict";
    A.module("MyApp").controller("OpenDlg", [ "$scope", "$modal", function($scope, $modal){
        $scope.openDlg = function(){
            $modal.open({
                controller : 'CategoryAddController',
                templateUrl : '/admindesktop/templates/category/add/'
            }).result.then(function(modalResult){
                console.log(modalResult);
            });
        };
    } ]);
}(this.angular));

例如，对话框的简单模板：

<div class="modal-content">
    <div class="modal-header">
        <h4 class="modal-title text-center">Создание новой категории</h4>
    </div>
    <form class="modal-body form-horizontal" name="categoryForm">
       <div class="form-group">
           <label for="name" class="control-label col-xs-3">Название</label>
           <div class="col-xs-9">
               <input name='name' type="text" class="form-control" ng-model="category.name" maxlength=50 required ng-required="true"/>
           </div>
           <div class="row has-error" ng-show="errors.name">
               <p ng-repeat="error in errors.name">{{ error }}</p>
           </div>          
       </div>
       <div class="container-fluid" ng-show="errors.length > 0">
           <div class="row">
               <p class="text-center text-danger" ng-repeat="error in errors">{{ error }}</p>
           </div>
       </div>      
    </form>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="save()" ng-disabled="categoryForm.$invalid">Сохранить</button>
        <button class="btn btn-default" ng-click="cancel()">Отмена</button>
    </div>
</div>

主要：模态窗口控制器：

(function(A) {
    "use strict";
    var app = A.module('MyApp');

    app.controller('CategoryAddController', [ '$scope', '$modalInstance', 'Category', 'growl', function($scope, $modalInstance, Category, growl) {

    $scope.save = function() {
        var category = new Category($scope.category);

        category.$save(function() {
            growl.success('Категория успешно создана');
            $modalInstance.close(true);
        }, function(response) {
            $scope.errors = response.data;
        });
    };

    $scope.cancel = function() {
        $modalInstance.close(false);
    };
    } ]);
}(this.angular));

我使用Service来改变模态控制器和父范围之间的数据：

(function(A){
    "use strict";
    A.module("MyApp").service('Storage', function(){
        return {
            storedData: undefined
        };
    });
}(this.angular));

在父范围内：

Storage.storedData = ...; //For example, selected row of table

在模态控制器中：

$scope.item = Storage.storedData; //Selected row of table

角度也有特殊的模块类型，value。