AngularJS：如何將變量保存到我的$範圍中？

-1

我正在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復發類型？

來源

2016-06-23 T. Ferreira

進行模態下的'submitCon troller'模板？ – AranS

'ng-model =「tasks.title」'表示你有一個$ scope.tasks對象，但'$ scope.tasks.push'好象是一個數組。那它是什麼？ –

@AranS現在，模式與.html文件中其餘代碼分離。但是我可以把這個模式放在'SubmitController'下面。我會試着看看會發生什麼。 –

在這種情況下，模態和模板的範圍是不同的。解決此問題的方法是，您將不得不使用$rootScope.tasks。

來源

2016-06-23 08:36:01 Prasheel

我該如何使用它？我試着簡單地把'ng-model =「$ rootScope.tasks.recurrence_type」>'但它不起作用。我也不知道在關閉模式時是否保存了該選項，這也可能是問題所在。 –

在控制器的每個地方將'$ scope'更改爲'$ rootScope'。這將工作 – Prasheel

我應該改變我的JavaScript文件，對吧？現在就讓我的'ng-models'保持現狀？ –

我會建議使用uibBootstraps $模式/ $ uibModal打開一個模式，這樣你就可以控制與範圍（共享範圍或模式的新範圍）會發生什麼：從HTML一個 https://angular-ui.github.io/bootstrap/#modal

通話這是這樣開的模態角方法：

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

我認爲，在當前的設置範圍是不同的任務對象在SubmitController沒有得到RECURRENCE_TYPE

來源

2016-06-23 10:07:37 Thorsten

AngularJS：如何將變量保存到我的$範圍中？

回答

相關問題