使用單獨的模板html文件傳遞來自離子/角模態的數據

Question

雖然答案可能在於Angular，但我正在開發一個簡單的離子移動應用程序。該應用程序非常簡單，通過顯示模式的添加按鈕顯示員工列表，讓用戶輸入一些詳細信息，點擊保存並將數據保留到後端Firebase商店。它有1個控制器和一個簡單的服務。最初，我有index.html裏面的modal內部腳本標籤的模板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.... 
} 

}]);