Angularjs：如何從模態控制器和指令控制器訪問主控制器

Question

我是Angularjs的新手並從事寵物項目。 我有一個主頁面，在HomeController中有功能。 然后我在主頁面上有一個按鈕，點擊打開一個模態，模態有一個名為ModalController的獨立控制器。 模態中還有一個指令，它有自己的控制器。 我還有其他3個地方需要使用日期選擇器，所以我創建了一個日期選擇器指令並在所有3個地方使用它。

我無法完成以下功能。

1. 點擊edit我打開了一個對話框，但我需要用行數據打開它，按下保存時應該更新行。 （ 我在這里遇到的麻煩是如何獲得指令控制器的日期值。 ）
2. 打開Modal並輸入詳細信息並單擊save我需要創建一條新記錄並將其添加到主控制器中的記錄中。 （ 如何將模態控制器中的數據保存到Home控制器記錄中。 ）

的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

Answer 1

您需要完成多個步驟才能完成任務。 關於將數據傳入和傳出模態控制器並將正確的日期設置為datepicker，我將給你一個良好的開端。

首先，確保你隔離了datepicker的范圍，這將使你的生活更加簡單。 然后將必要的模型傳遞給該指令並將其綁定到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中，您可以使用服務 。 因此，您需要使用方法注冊新的服務對象以獲取，更新和保存記錄。 就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