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

我正在开发一个简单的Ionic移动应用程序，尽管答案可能在于Angular。该应用程序非常简单，显示一个员工列表，并带有一个显示模式的Add按钮，允许用户输入一些详细信息，单击Save，然后将数据持久化到后端Firebase存储。它有一个控制器和一个简单的服务。最初，我在index.html中使用了model-inside脚本标记的模板html，一切都很好。当我决定对内容进行结构化并将模式模板放在一个单独的html文件中时，突然间，通过输入框分配给ng modal的数据对象不再将任何数据传递给事件处理程序以保存数据，而是始终未定义。其他一切正常工作，模式显示ok，事件处理程序调用正确的函数等。唯一的更改是将输入模板移动到单独的文件中。我知道这很可能是一件非常简单的事情，但我一辈子都无法找出原因，也无法在其他任何地方找到关于它的任何信息

模式的模板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>

---

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

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

---

…每次您引用它们时都会出现类似情况。

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

请参阅此帖子：或参阅操作中的：

用法：

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

---

员工服务在哪里？你在兑现承诺吗？不兑现承诺。addEmployee函数无法调用employeeService.saveEmployee，因为它在尝试组装employee对象时出错，因为从模板传回时数据参数未定义。当模式模板html位于index.html中时，这很好，但当我将其移动到自己的文件中时，我发现了这个问题。谢谢。我已经试过了，但你的建议让我绝对确信。虽然它最初不起作用，但我随后在控制器的顶部添加了$scope.data={}声明，以便查看，它成功了。干杯。是的，如果对象本身不存在，您就不能分配对象的属性（例如$scope.data）。为此，我对代码做了一些修改，以满足我的要求，但非常感谢！

(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....
}

}]);