如何在 AngularJS 的对话框中存储获取 md-select ng-model 值？答案

【问题标题】：How to store obtain an md-select ng-model value within a dialog in AngularJS?如何在 AngularJS 的对话框中存储获取 md-select ng-model 值？
【发布时间】：2017-03-02 02:13:21
【问题描述】：

我有这个模板用于传递到 md 对话框：

showDialog函数：

$scope.showDialog = function(element) {
var parentEl = angular.element(document.body);
$mdDialog.show({
  template: element,
  scope: $scope,
  preserveScope: true,
  parent: parentEl,
  clickOutsideToClose: true,
  controller:function($scope) {
    $scope.answer = null;
   }
  });
}

调用 showDialog 函数

$scope.showDialog(`<div class="md-dialog-container" id="functionality">
    <md-dialog aria-label="Dialog">
  <md-input-container>
    <label>Who do you want to assign to build functionality?</label>
      <md-select ng-model="startAppController.fluff">
        <md-optgroup label="Select an Employee">
          <md-option ng-value={{employee.name}} ng-repeat="employee in staff" ng-selected="true">{{employee.name}}</md-option>
        </md-optgroup>
      </md-select>

    </md-input-container>
<div>
  <md-input-container flex-gt-xs>
    <md-button type="submit" class="md-raised md-primary" ng-click="startAppController.assign()">Assign Work!</md-button>
  </md-input-container>
  </div>
  </md-dialog>
</div>`);

我刚刚让 ng-click 部分工作，所以我实际上可以调用该 assign() 函数。但是，我无法将变量传递给 assign()，也无法从 md-select 框中访问“fluff”变量。

我不确定范围在整个事情中是如何发挥作用的，但我似乎大部分时间都在发挥作用。我只是无法访问那个绒毛变量。

【问题讨论】：

对我的回答有什么建议吗？

标签： javascript angularjs dialog angularjs-scope angular-material

【解决方案1】：

首先，不要将scope从主控制器传递到对话框控制器并使用preserveScope，您应该使用locals属性传递数据。

其次，在对话框的控制器中，您应该实现$mdDialog.cancel() 和$mdDialog.hide() 方法来取消或确认对话框。在这些方法中传递的任何参数都可以在调用此对话框的控制器中访问。

第三，返回$mdDialog.show()，它会返回一个promise。现在，使用then 方法根据需要处理promise。

这里是 JavaScript

 $scope.showDialog = function(element) {    
  var parentEl = angular.element(document.body);

return $mdDialog.show({
    template: element,
    locals: { data: "Pass Any Variable"},
    parent: parentEl,
    clickOutsideToClose: true,
    controller: function($scope, data) {
      $scope.fluff = [];
      $scope.data = data;
      $scope.staff = {
        0: {name: "John Doe"},
        1: {name: "Lorem Ipsum"},
        2: {name: "Random Dude"},
        3: {name: "Kid"}
      };
      $scope.cancel = function(){
        $mdDialog.cancel();
      }
      $scope.submit = function(){
        $mdDialog.hide($scope.fluff);
      } 
    }
  });
}

$scope.openDialog = function(){
$scope.showDialog(`<div class="md-dialog-container" id="functionality">
<md-dialog aria-label="Dialog">
<md-input-container>
<label>Who do you want to assign to build functionality?</label>
  <md-select multiple ng-model="fluff">
      <md-option ng-value="employee.name" ng-repeat="employee in staff">{{employee.name}}</md-option>
  </md-select>

</md-input-container>
{{data}}
{{fluff}}
<div>
<md-input-container flex-gt-xs>
 <md-button class="md-raised md-primary" ng-click="submit()">Assign Work!</md-button>
 <md-button class="md-raised md-primary" ng-click="cancel()">Back</md-button>
 </md-input-container>
</div>
</md-dialog>
</div>`).then(function(response){
  $scope.data = response;
}, function(response){
  $scope.data = "cancelled";
});
}

这是工作的Example。

【讨论】：