Angularjs:如何从模态控制器和指令控制器访问主控制器
我对Angularjs很陌生，我在做一个宠物项目。我有一个主页，它有HomeController中的函数。然后我在主页上有一个按钮，点击打开一个模态，这个模式有一个单独的控制器，名为ModalController。在有自己的控制器的模态中也有一个指令。我还有另外三个地方需要使用日期选择器，所以我创建了一个日期选择器指令，并在所有三个地方使用它。
我无法完成以下功能。
- 单击
edit，我打开了一个对话框，但是我需要用行数据打开它，当按下保存时，应该更新行。(我在这里面临的麻烦是如何获得作为指令控制器的日期的值。) - 打开Modal并输入细节，然后单击save，我需要创建一个新的记录，并将它添加到主控制器中的记录中。(如何将数据从Modal控制器保存到家庭控制器记录。)
script.js
angular.module('myApp', ['ngAnimate', 'ui.bootstrap']);
angular.module('myApp').controller('HomeController', function($scope, $uibModal) {
$scope.records = [{'date': new Date(), 'place': 'Bangalore'}];
$scope.openModal = function() {
$uibModal.open({
templateUrl: 'modaldialog.html',
controller: 'ModalController'
});
};
// How to get the directive date-picker value and pass it and save it.
$scope.edit = function(record) {
$uibModal.open({
templateUrl: 'modaldialog.html',
controller: 'ModalController'
});
};
$scope.addwithinCtrl = function() {
var record = {'date': new Date(), 'place': 'Hyderabad'};
$scope.records.push(record);
};
});
angular.module('myApp').controller('ModalController', function($scope, $uibModalInstance) {
// save the input and dismiss the dialog
$scope.save = function() {
// how to save the entered data before closing the dialog?
$uibModalInstance.dismiss('cancel');
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
});
angular.module('myApp').directive('dateDirective', function() {
return {
restrict: 'A',
templateUrl: 'date.html',
controller: function($scope) {
$scope.format = 'dd-MMM-yy';
$scope.open = function() {
$scope.status.opened = true;
};
$scope.status = {
opened: false
};
}
}
});柱塞：柱塞
Stack Overflow用户
发布于 2015-11-13 07:59:03
为了完成任务，还需要执行多个步骤。我将给您一个良好的开端，关于传递数据到和从模态控制器和设置适当的日期数据报警器。
首先，确保你隔离了数据报警器的范围，这将使你的生活在未来变得更简单。然后将必要的模型传递到该指令中，并将其绑定到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
从控制器外部添加新记录
至于你的第二个问题，这是另一个有趣的问题。因为在原始代码中，您将记录存储在范围数组中，这实际上并不是添加新记录的方便的设计解决方案。在现实世界中，您可能会有一个单独的模型层，负责获取现有记录和创建新记录。在角度上，您使用服务进行此操作。因此，您需要使用获取、更新和保存记录的方法注册一个新的服务对象。在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
https://stackoverflow.com/questions/33687785
复制相似问题
腾讯云开发者
