javascript - 如何在 AngularJS 中创建对话框，但仅从服务器加载对话框内容

Question

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

1. 对话框内容可能来自任何地方 - 字符串模板、脚本模板或 URL 模板
2. 对话框标题和操作将来自调用者，而不是被调用者。换句话说，父作用域决定了模式对话框中应该存在的标题和哪些操作按钮(我发现许多对话框将标题和操作按钮封装在模板本身中，例如 this one )
3. 模板的内容应完全独立于父范围(调用者)。事实上，它甚至可能不是用 AngularJS 编写的。它可能会使用 jQuery。

4. 如果加载的模板是在 AngularJS 中，它应该封装它的 Controller 。例如，ng-include不喜欢<script>标签。

   有一个解决方法( here 、 here 和 here )，但是用 text/javascript-lazy 装饰脚本标签的想法非常臭又脏，更不用说我希望内容 HTML 是独立的并且可执行，以防它没有作为 AngularJS 模式对话框的内容加载。

5. 父作用域和内容之间的通信应通过通用契约完成(我想到了 JavaScript 事件)

我已经尝试过ngDialog ，但问题是容器应该通过 controller到加载的模板。那不是我想要的。在 Bootstrap 对话框中也 it seems您必须通过 controller从父范围到对话框内容。这打破了封装的概念。这是不可取的。此外，它依赖于对话结果，这也是不可取的。

Answer 1

我建议使用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' ]);

注入(inject)jour Controller $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>

主要:模态窗口的 Controller :

(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));

我使用服务在模态 Controller 和父范围之间更改数据:

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

在父范围内:

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

在模态 Controller 中:

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

Angular也有特殊的模块类型，value .