AngularJS：どのように私の$スコープにモーダル変数を保存するには？

Question

私はAngularJSでタスク管理ツールを作成しています。ユーザーが新しいタスクを作成するために入力するフォームがあります。ここでのショートバージョンがあります：あなたは私がローカルストレージに作業を保存しています見ることができるように

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

：

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

私はスコープを設定し、現在では考えて異なるものであり、タスクはSubmitControllerにオブジェクトがrecurrence_type