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

如您所见，我将任务保存在本地存储中。这只是用于测试目的的临时解决方案，最终版本会将任务保存到数据库中。

无论如何，我还必须有一个重复机制，因此我的tasks.recurrence_type中有$scope，以及在表单中打开模态的按钮。

这是模态：

<!-- 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

在这种情况下，模态和模板的范围是不同的。此问题的解决方案是您必须使用<div class="mydiv"> <p></p> <h3 class="nottobetargeted"></h3> </div>。

Answer 2

我建议使用uibBootstraps $ modal / $ uibModal来打开模态，这样你就可以控制范围（共享范围或模态的新范围）会发生什么： https://angular-ui.github.io/bootstrap/#modal

从html调用一个角度方法，打开模态，如下所示：

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

我认为在你当前的设置中，范围是不同的，并且SubmitController中的tasks对象没有得到recurrence_type

AngularJS：如何将模态中的变量保存到$ scope？

2 个答案: