Как создать диалог в AngularJS, но загрузить только содержимое диалога с сервера

Я знаю, что это может быть простой вопрос, но я разочарован здесь, и я не могу заставить его работать. Я новичок в AngularJS и пытаюсь реализовать модальный диалог (или найти его) со следующими условиями:

  1. Содержимое диалогового окна может поступать откуда угодно — из шаблона строки, шаблона сценария или шаблона из URL-адреса.
  2. Заголовок диалога и действия будут исходить от вызывающего, а не от вызываемого. Другими словами, родительская область определяет заголовок и какие кнопки действий должны существовать в модальном диалоговом окне (многие диалоговые окна, которые я обнаружил, инкапсулируют заголовок и кнопки действий в самом шаблоне, например этот)
  3. Содержимое шаблона должно быть полностью независимым от родительской области (вызывающей). Фактически, это может быть даже не написано на AngularJS. Он может использовать jQuery.

  4. Если загруженный шаблон находится в AngularJS, он должен инкапсулировать свой контроллер. Например, ng-include не любит теги <script>.

    Для этого есть обходной путь (здесь, здесь и здесь), но идея украшения тега script с помощью text/javascript-lazy очень вонючая и грязная, пусть только то, что я хочу, чтобы контент HTML был автономным и исполняемым, если он не загружается как содержимое модального диалога AngularJS.

  5. Связь между родительской областью и содержимым должна осуществляться через общий контракт (события JavaScript приходят мне на ум)

Я пробовал ngDialog, но проблема в том, что контейнер должен передать controller загруженному шаблону. Это не то, чего я хочу. В диалоговом окне Bootstrap также кажется, что вам нужно передать controller из родительской области в содержание диалога. Это нарушает само понятие инкапсуляции. Это нежелательно. Кроме того, это зависит от результата диалога, что также нежелательно.


javascript dialog angularjs
person Saeed Neamati    schedule 23.12.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я рекомендую использовать библиотеку 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' ]);

Вставьте в jour контроллер $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>

Main: контроллер для модального окна:

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

Я использую Сервис для изменения данных между модальным контроллером и родительской областью:

(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

Также у angular есть специальный тип модуля, value.

person Dunaevsky Maxim    schedule 06.01.2015