Question

我是Angularjs的新手并从事宠物项目。我有一个主页，其中包含null中的功能。然后我在主页面上有一个按钮，点击打开一个模态，模态有一个名为HomeController的独立控制器。模态中还有一个指令，它有自己的控制器。我还有其他3个地方需要使用日期选择器，所以我创建了一个日期选择器指令并在所有3个地方使用它。

我无法执行以下功能。

点击ModalController我打开了一个对话框，但是我需要用行数据打开它，按下后，save应该更新行。（我在这里遇到的麻烦是如何获得作为指令控制器的日期值。）
打开Modal并输入详细信息并单击save我需要创建一条新记录并将其添加到主控制器中的记录中。（如何将数据从模态控制器保存到主控制器记录。）

的script.js

edit

Plunker：PLUNKER

Answer 1

您需要完成多个步骤才能完成任务。关于将数据传入和传出模态控制器并将正确的日期设置为datepicker，我将给你一个良好的开端。

首先，请确保您隔离日期选择器的范围，这将使您的生活更加简单。然后将必要的模型传递给this指令并将其绑定到datepicker（在datepicker模板ng-model="model"中）：

angular.module('myApp').directive('dateDirective', function() {
    return {
        scope: {
            model: '=ngModel'
        },
        // ... rest of code is unchanged 
    }
});

然后你需要将记录对象传递给模态控制器。为此，您将使用模态的解析指令：

$scope.edit = function(record) {
    $uibModal.open({
        resolve: {
            record: record
        },
        templateUrl: 'modaldialog.html',
        controller: 'ModalController'
    });
};

在HTML中，您需要将record传递给edit函数：

<button class="btn btn-primary" type="button" ng-click="edit(record)">edit</button>

最后，为了更新原始记录，您需要订阅$uibModal.open方法返回的已解决承诺：

.controller('ModalController', function($scope, $uibModalInstance, record) {

    $scope.record = angular.copy(record);

    $uibModalInstance.result.then(function() {
        angular.extend(record, $scope.record);
    });

    // ...
});

注意，在模态控制器中，您需要复制原始记录并在模态模板中使用它。这是必要的，因为只有在按下保存时才想影响原始记录 - 然后使用更改的数据扩展原始模型。

演示： http://plnkr.co/edit/Hq0wFilQpZ26Ha2nyNxN?p=info

从控制器外部添加新记录

至于你的第二个问题，这是另一个有趣的问题。由于在原始代码中您将记录存储在作用域数组中，这实际上并不是用于添加新记录的非常方便的设计解决方案。在现实世界中，您可能有一个单独的模型层负责获取现有和创建新记录。在Angular中，您可以使用services。因此，您需要使用方法注册新的服务对象以获取，更新和保存记录。就MVC而言，它将对应于M层。然后，无论何时您想从任何控制器添加新记录，您都将使用此服务，该服务在每个控制器中都是相同的单一对象。

以下是您案例中非常简单的服务示例：

angular.module('myApp').service('records', function() {

    this.data = [{
        'date': new Date(),
        'place': 'Bangalore'
    }];

    this.fetch = function() {
        return this.data;
    };

    this.save = function(record) {
        this.data.push(record);
    };
});

最后，这里是您的问题的完整示例，它可以使用服务从控制器和外部保存新记录，还允许编辑。

演示： http://plnkr.co/edit/NxP0HJurZuLA7odzzdie?p=preview

Angularjs：如何从模态控制器和指令控制器访问主控制器

1 个答案:

从控制器外部添加新记录