AngularJS : 모달 변수를 $ $ scope에 저장하는 방법은 무엇입니까?

Question

저는 AngularJS에서 작업 관리 도구를 만들고 있는데, 사용자가 새 작업을 작성하기 위해 작성해야하는 양식이 있습니다. 여기에 짧은 버전입니다 :

<div ng-controller="SubmitController"> 
    <!-- Form --> 
    <form> 
     Title 
     <input type="text" ng-model="tasks.title"> 

     ID 
     <input type="text" ng-model="tasks.id"> 

     Type 
     <select ng-model="tasks.type"> 
      <option value="" disabled selected></option> 
      <option value="Job">Job</option> 
      <option value="Maintenence">Maintenence</option> 
      <option value="Verification">Verification</option> 
     </select> 

     <!-- This button opens a modal to select the recurrence --> 
     <a class="btn modal-trigger" href="#modal4">Recurrence</a> 

     <!-- This button adds the task to the list --> 
     <a ng-click="add(tasks)" class="btn" type="submit" name="action">Add</a> 
    </form> 
</div> 

여기 내의 .js 파일에 작업을 저장하는 방법은 다음과 같습니다

$scope.add = function(tasks) 
{ 
    $scope.tasks.push 
    ({ 
     'id': tasks.id, 
     'title': tasks.title, 
     'type': tasks.type, 
     'recurrence_type': tasks.recurrence_type 
    }); 

    localStorage.setItem('tasks',JSON.stringify($scope.tasks)); 
}; 

당신은 내가 로컬 저장소에서 작업을 저장하고있어 볼 수 있듯이. 이것은 테스트 용 임시 솔루션 일 뿐이며, 최종 버전은 작업을 데이터베이스에 저장합니다.

어쨌든, 나는 또한 $scope에 tasks.recurrence_type과 그 모달을 열 수있는 재발 메커니즘을 가지고 있어야합니다.

내 질문

<!-- Modal Structure --> 
<div id="modal4" class="modal"> 
    <div class="modal-content"> 
     <form> 
      Repeats: 
      <select ng-model="tasks.recurrence_type"> 
       <option value="" disabled selected></option> 
       <option value="Daily">Daily</option> 
       <option value="Weekly">Weekly</option> 
       <option value="Monthly">Monthly</option> 
       <option value="Yearly">Yearly</option> 
      </select> 
     </form> 
    </div> 
</div> 
<div class="modal-footer"> 
    <a href="#" class=" modal-action modal-close btn">Save</a> 
</div> 

입니다 : : 어떻게이 $scope.tasks.recurrence_type 에 그 모달의 재발 유형을 저장합니까 여기

는 모달입니까?

Answer 1

이 경우 모달과 템플리트의 범위가 다릅니다. 이 문제의 해결책은 $rootScope.tasks을 사용해야한다는 것입니다.

Answer 2

내가 모달을 열 uibBootstraps $ 모달/$ uibModal를 사용하는 것이 좋습니다 것입니다, 그래서 당신이 범위 (공유 범위 또는 모달에 대한 새 범위)에 발생하는 일을 제어 할 수있는

: html로 A로부터 https://angular-ui.github.io/bootstrap/#modal

전화 이 같은 모달 열립니다 각 방법

$modal.open({ 
    templateUrl: "path to modal html", 
    scope: $scope 
}); 

나는 범위가 다르고 작업이 RECURRENCE_TYPE에게