วิธีสร้างกล่องโต้ตอบใน AngularJS แต่โหลดเฉพาะเนื้อหากล่องโต้ตอบจากเซิร์ฟเวอร์

ฉันแนะนำให้ใช้ไลบรารี Angular-UI คุณสามารถสร้างกล่องโต้ตอบ a-la "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>

หลัก: ตัวควบคุมสำหรับหน้าต่างโมดอล:

(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

นอกจากนี้ เชิงมุมยังมีประเภทโมดูลพิเศษ value