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

Angularjs: How to access main controller from modal controller and directive controller

本文关键字：控制器 指令控制器 访问 模态 Angularjs      更新时间：2023-09-26

我是Angularjs的新手，正在做一个宠物项目。我有一个主页，它在HomeController中有一些功能。然后我在主页中有一个按钮，点击后打开一个模态，该模态有一个单独的控制器，名为ModalController。还有一个指令存在于具有自己控制器的模态中。我还有另外三个地方需要使用日期选择器，所以我创建了一个日期选择器指令，并在所有三个地方都使用它。

我无法执行以下功能。

  1. 单击edit，我打开了一个对话框，但我需要用行数据打开它，当按下保存时，应该会更新行。（我在这里面临的问题是如何获得指令的控制器日期的值。）
  2. 打开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
        };
    }
  }
});

Plunker:Plunker

要完成任务，还需要执行多个步骤。我将为您提供一个良好的开端，介绍如何在模式控制器之间传递数据，以及如何设置正确的日期到日期选择器。

首先，确保隔离日期选择器的范围，这将使您的生活在未来变得更简单。然后将必要的模型传递到该指令中，并将其绑定到日期选择器（在日期选择器模板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

从控制器外部添加新记录

至于你的第二个问题，这是另一个有趣的问题。由于在原始代码中，您将记录存储在scope数组中，因此这实际上并不是添加新记录的非常方便的设计解决方案。在现实世界中，您可能有一个单独的模型层负责获取现有记录和创建新记录。在Angular中，您可以为此使用服务。因此，您需要使用获取、更新和保存记录的方法注册一个新的服务对象。就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

相关文章：