使用单独的模板 html 文件从离子/角度模态传递数据

Question

我正在开发一个简单的 Ionic 移动应用程序，尽管答案可能在于 Angular。该应用程序非常简单，显示带有添加按钮的员工列表，该按钮显示模式，让用户输入一些详细信息，单击“保存”并将数据保存到后端 Firebase 商店。它有 1 个控制器和一个简单的服务。最初，我在 index.html 中有用于模态脚本标签的模板 html，并且一切正常。当我决定构建结构并将模态模板放在一个单独的 html 文件中时，突然间，通过输入框分配给 ng-modal 的数据对象不再将任何数据传递给事件处理程序以保存数据，而是始终未定义。其他一切正常，模态显示正常，事件处理程序正在调用正确的函数等。唯一的变化是将输入模板移动到单独的文件中。我知道这很可能是一件非常简单的事情，但我一生都无法弄清楚原因，也无法在其他任何地方找到有关它的任何信息。

模态的模板 HTML 文件：

  <ion-list>

    <h1>Add Employee</h1>

    <div class="list list-inset">

      <ion-item>
        <label class="item item-input">
          <input type="text" placeholder="Employee Name" ng-model="data.employeeName">
        </label>

        <label class="item item-input">
          <input type="text" placeholder="Employee Age" ng-model="data.employeeAge">
        </label>
      </ion-item>

        <button class="button button-outline button-block button-balanced" 
          ng-click="addEmployee(true, data)">
            Save &amp; Add Another
        </button>

        <button class="button button-outline button-block button-positive" 
          ng-click="addEmployee(false, data)">
            Save
        </button>

        <button class="button button-outline button-block button-assertive" 
          ng-click="closeAddModal()">
            Cancel
        </button>

  </ion-list>

</ion-modal-view>

addEmployee 事件 - 数据参数现在始终未定义。与嵌入式模板一起工作正常：

$scope.addEmployee = function(retainModal, data) {
    var employee = {employeeName:data.employeeName,
                     employeeAge:data.employeeAge};
    employeeService.saveEmployee(employee);
    if (! retainModal) {
        $scope.closeAddModal();
    };
    data.employeeName = "";
    data.employeeAge = "";
}; 

Answer 1

您需要将模型附加到范围：

$scope.data.employeeName = "";
$scope.data.employeeAge = "";

...每次引用它们时都类似。

Answer 2

基于这个问题和其他需求，我创建了一个有用的服务。

查看此帖子：Ionic modal service 或查看运行中：CodePen

(function () {
'use strict';

var serviceId = 'appModalService';
angular.module('app').factory(serviceId, [
    '$ionicModal', '$rootScope', '$q', '$injector', '$controller', appModalService
]);

function appModalService($ionicModal, $rootScope, $q, $injector, $controller) {

    return {
        show: show
    }

    function show(templateUrl, controller, parameters) {
        // Grab the injector and create a new scope
        var deferred = $q.defer(),
            ctrlInstance,
            modalScope = $rootScope.$new(),
            thisScopeId = modalScope.$id;

        $ionicModal.fromTemplateUrl(templateUrl, {
            scope: modalScope,
            animation: 'slide-in-up'
        }).then(function (modal) {
            modalScope.modal = modal;

            modalScope.openModal = function () {
                modalScope.modal.show();
            };
            modalScope.closeModal = function (result) {
                deferred.resolve(result);
                modalScope.modal.hide();
        };
        modalScope.$on('modal.hidden', function (thisModal) {
            if (thisModal.currentScope) {
                var modalScopeId = thisModal.currentScope.$id;
                if (thisScopeId === modalScopeId) {
                    deferred.resolve(null);
                    _cleanup(thisModal.currentScope);
                }
            }
        });

        // Invoke the controller
        var locals = { '$scope': modalScope, 'parameters': parameters };
        var ctrlEval = _evalController(controller);
        ctrlInstance = $controller(controller, locals);
        if (ctrlEval.isControllerAs) {
            ctrlInstance.openModal = modalScope.openModal;
            ctrlInstance.closeModal = modalScope.closeModal;
        }

        modalScope.modal.show();

        }, function (err) {
            deferred.reject(err);
        });

        return deferred.promise;
    }

    function _cleanup(scope) {
        scope.$destroy();
        if (scope.modal) {
            scope.modal.remove();
        }
    }

    function _evalController(ctrlName) {
        var result = {
            isControllerAs: false,
            controllerName: '',
            propName: ''
        };
        var fragments = (ctrlName || '').trim().split(/\s+/);
        result.isControllerAs = fragments.length === 3 && (fragments[1] || '').toLowerCase() === 'as';
        if (result.isControllerAs) {
            result.controllerName = fragments[0];
            result.propName = fragments[2];
        } else {
            result.controllerName = ctrlName;
        }

        return result;
    }

  } // end
})();

用法：

appModalService
 .show('<templateUrl>', '<controllerName> or <controllerName as ..>', <parameters obj>)
 .then(function(result) {
     // result from modal controller: $scope.closeModal(result) or <as name here>.closeModal(result) [Only on template]
 }, function(err) {
     // error
 });

您可以使用另一个服务来集中所有模态的配置：

angular.module('app')
.factory('myModals', ['appModalService', function (appModalService){

var service = {
    showLogin: showLogin,
    showEditUser: showEditUser
};

function showLogin(userInfo){
    // return promise resolved by '$scope.closeModal(data)'
    // Use:
    // myModals.showLogin(userParameters) // get this inject 'parameters' on 'loginModalCtrl'
    //  .then(function (result) {
    //      // result from closeModal parameter
    //  });
    return appModalService.show('templates/modals/login.html', 'loginModalCtrl as vm', userInfo)
    // or not 'as controller'
    // return appModalService.show('templates/modals/login.html', 'loginModalCtrl', userInfo)
}

function showEditUser(address){
    // return appModalService....
}

}]);