Cara membuat dialog di AngularJS, tetapi hanya memuat konten dialog dari server

Saya tahu ini mungkin pertanyaan sederhana, tapi saya frustrasi di sini, dan saya tidak bisa membuatnya berhasil. Saya baru mengenal AngularJS, dan saya mencoba menerapkan dialog modal (atau menemukannya) dengan ketentuan berikut:

  1. Konten dialog bisa datang dari mana saja—templat string, templat skrip, atau templat dari URL
  2. Judul dialog dan tindakan akan datang dari penelepon, bukan dari pihak yang dipanggil. Dengan kata lain, lingkup induk menentukan judul dan tombol tindakan mana yang harus ada dalam dialog modal (banyak dialog yang saya temukan merangkum tombol judul dan tindakan dalam templat itu sendiri, misalnya yang ini)
  3. Konten template harus benar-benar independen dari lingkup induk (pemanggil). Faktanya, itu mungkin tidak ditulis dalam AngularJS. Mungkin menggunakan jQuery.

  4. Jika templat yang dimuat berada di AngularJS, templat tersebut harus merangkum pengontrolnya. Misalnya, ng-include tidak menyukai tag <script>.

    Ada solusi untuk itu (di sini, di sini dan di sini) tapi ide mendekorasi tag skrip dengan text/javascript-lazy sangat bau dan kotor, biar sendirian saya ingin konten HTML menjadi mandiri dan dapat dieksekusi jika tidak dimuat sebagai konten dialog modal AngularJS.

  5. Komunikasi antara lingkup induk dan konten harus dilakukan melalui kontrak bersama (peristiwa JavaScript muncul di benak saya)

Saya sudah mencoba ngDialog, tetapi masalahnya adalah penampung harus meneruskan controller ke templat yang dimuat. Bukan itu yang saya inginkan. Dalam dialog Bootstrap juga tampaknya Anda harus meneruskan controller dari lingkup induk ke isi dialognya. Ini mematahkan gagasan enkapsulasi. Itu tidak diinginkan. Selain itu, ini bergantung pada hasil dialog, yang juga tidak diinginkan.


javascript dialog angularjs
person Saeed Neamati    schedule 23.12.2014    source sumber

Jawaban (1)


arrow_upward
0
arrow_downward

Saya sarankan menggunakan perpustakaan Angular-UI. Anda dapat dengan mudah membuat dialog apa pun ala "Twitter Bootstrap":

Sertakan js di kepala halaman Anda.

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

Sertakan modul pada inisialisasi aplikasi.

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

Suntikkan ke pengontrol hari $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));

Misalnya, template sederhana untuk dialog:

<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>

Utama: pengontrol untuk jendela modal:

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

Saya menggunakan Layanan untuk mengubah data antara pengontrol modal dan lingkup induk:

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

Dalam lingkup induk:

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

Dalam pengontrol modal:

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

Sudut juga memiliki tipe modul khusus, nilai.

person Dunaevsky Maxim    schedule 06.01.2015