별도의 템플릿 html 파일을 사용하여 이오니아/각 모달에서 데이터 전달

Question

응답이 Angular 인 경우에도 간단한 Ionic 모바일 앱을 개발하고 있습니다. 이 앱은 매우 간단하며, 모달을 표시하는 추가 버튼이있는 직원 목록을 표시하고 사용자가 세부 정보를 입력하고 저장을 클릭하면 데이터를 백엔드 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 
})(); 

사용법 :

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

}]);