إرجاع البيانات من خدمة الحوار المشروط angularjs

Question

أنا جديد إلى حد ما على AngularJS وأواجه مشكلة في إرجاع البيانات من خدمة الحوار المشروط.في الأساس، قمت بنسخ خدمة دان واهلين http://weblogs.asp.net/dwahlin/archive/2013/09/18/building-an-angularjs-modal-service.aspx وأنا أسميها من وحدة التحكم الخاصة بي.

myApp.controller('MyController', function($scope, ModalService) {
    window.scope = $scope;
    $scope.mydata = {name: ""};

    $scope.showModal = function () {

        var modalOptions    = {
            closeButtonText: 'Cancel',
            actionButtonText: 'Save',
            headerText: 'Save Dialog'
        }

        ModalService.showModal({}, modalOptions).then(function (result) {

        });
    }

});

ثم لدي جزئي مثل ذلك:

<div class="modal-header">
    <h3>{{modalOptions.headerText}}</h3>
</div>
<form ng-submit="modalOptions.submit()">
<div class="modal-body">
    <label>Name</label>
    <input type="text" data-ng-model="mydata.name">
</div>
<div class="modal-footer">
    <button type="button" class="btn" data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
    <button type="submit" class="btn btn-primary">{{modalOptions.actionButtonText}}</button>
</div>

يتم استدعاء هذا المشروط مثل هذا:

<button class="btn btn-primary hidden pull-right" id="save" data-ng-click="showModal()">Save</button>

لذا سؤالي هو كيف يمكنني إعادة قيمة حقل الاسم إلى وحدة التحكم؟لقد بحثت في جميع أنحاء الويب ووجدت أن جميع الأمثلة تحتوي على الوظيفة التي تفتح الوسائط الموجودة داخل وحدة التحكم، مما يجعل الأمر أسهل كثيرًا حيث أن نطاق $ من وحدة التحكم موجود أيضًا في الوظيفة التي تفتح الوسائط.

حاولت إضافة الكود التالي إلى وظيفة "العرض" في الخدمة لكنه لم ينجح.

    tempModalDefaults.resolve = function($scope) {
        mydata = function () {
            return $scope.mydata;
        }
    }

شكرًا

ملاحظة.لقد قمت بإعادة تسمية modalService إلى ModalService في الكود الخاص بي، لذا فهذا ليس خطأ مطبعي.يتم فتح النموذج وإغلاقه كما ينبغي، ولكن لا يمكنني تمرير قيمة الحقل مرة أخرى إلى وحدة التحكم.

Answer 1

في الزر الخاص بك، أضف data-ng-click="modalOptions.ok(mydata)"

<button type="submit" class="btn btn-primary" data-ng-click="modalOptions.ok(mydata)">{{modalOptions.actionButtonText}}</button>

ويمكنك الحصول عليه من:

ModalService.showModal({}, modalOptions).then(function (result) {
              console.log(result.name);
        });

تجريبي

إذا كنت تريد استخدام modalOptions.submit الوظيفة، تحتاج إلى تغيير التعليمات البرمجية الخاصة بك قليلاً

في HTML الخاص بك، قم بتمرير mydata ل modalOptions.submit وظيفة:

<form ng-submit="modalOptions.submit(mydata)">

الخدمة النموذجية الخاصة بك، استبدلها في show وظيفة:

return $modal.open(tempModalDefaults); //remove the .result

وحدة التحكم الخاصة بك:

$scope.showModal = function () {

        var modalOptions    = {
            closeButtonText: 'Cancel',
            actionButtonText: 'Save',
            headerText: 'Save Dialog',
            submit:function(result){
              $modalInstance.close(result);
            }
        }

        var $modalInstance = ModalService.showModal({}, modalOptions);
        $modalInstance.result.then(function (result) {
             console.log(result.name);
        });
    }

تجريبي