将变量传递给 Angular 材质对话框中的 Angular 1.x 组件答案

【问题标题】：Passing a variable to an angular 1.x component that is in a Angular Material Dialog将变量传递给 Angular 材质对话框中的 Angular 1.x 组件
【发布时间】：2016-11-17 15:10:08
【问题描述】：

我正在尝试将对象传递给角材质对话框内的组件。

我用来显示Dialog的函数是：

    ctrl.openCampaignSplitDialog = function(ev, split){
        $mdDialog.show({
            template: '<campaign-split-dialog split="$ctrl.split"></campaign-split-dialog>',
            parent: angular.element(document.body),
            targetEvent: ev,
            clickOutsideToClose:true,
            fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
        }).then(function(split) {
                ctrl.addCampaignSplit(split);
            }, function() {
                $scope.status = 'You cancelled the dialog.';
            });
    };

这会正确打开对话框。

这是组件的代码：

angular
.module('app')
.component('campaignSplitDialog', {
    templateUrl: 'app/components/campaignSplitDialog/campaignSplitDialog.html',
    controller: campaignSplitDialogCntrlr,
    bindings:{
        split: '<'
    }
});

/** @ngInject */
function campaignSplitDialogCntrlr($mdDialog) {
    var ctrl = this;
    console.log('splitter', ctrl.split);
}

问题源于我不确定如何将split 对象从打开的对话框函数传递到组件模块。在“模板”URL 中有split="$ctrl.split"。我尝试了多种不同的方法，但都没有奏效。我尝试过双括号、纯变量名和使用 controllerAs 语法。

我也尝试使用locals:{} 参数通过对话框传递值，但因为我没有指定控制器，因为它是在调用组件时配置的，所以它不会出现在组件中。

【问题讨论】：

标签： javascript angularjs web-applications angular-material

【解决方案1】：

我将回答您问题的第一行 - “我正在尝试将对象传递给角度材料对话框内的组件” - 因为您尝试实现它的方式看起来不正确。

CodePen

标记

<div ng-controller="MyController as vm" ng-cloak="" ng-app="app">
  <md-button class="md-primary md-raised" ng-click="vm.open($event)">
    Custom Dialog
  </md-button>

  <script type="text/ng-template" id="test.html">
    <md-dialog aria-label="Test">
        <campaign-split split="text"></campaign-split>
    </md-dialog>
  </script>
</div>

angular.module('app',['ngMaterial'])

.component('campaignSplit', {
    template: '<div>{{$ctrl.split}}</div>',
    bindings:{
        split: '<'
    }
})

.controller('MyController', function($scope, $mdDialog) {
  this.open = function(ev) {
    $scope.text = "Hello";
    $mdDialog.show(
      {
        templateUrl: "test.html",
        clickOutsideToClose: true,
        scope: $scope,
        preserveScope: true,
        controller: function($scope) {
       },
    });
  };

  this.save = function () {
    $mdDialog.cancel();
  }
})

希望这将为您指明正确的方向。

【讨论】：

【解决方案2】：

检查属性选项。locals https://material.angularjs.org/HEAD/#mddialog-show-optionsorpreset

$mdDialog.show({
        template: '<campaign-split-dialog split="$ctrl.split"></campaign-split-dialog>',
        locals:{
             split: $ctrl.split
        },
        parent: angular.element(document.body),
        targetEvent: ev,
        clickOutsideToClose:true,
        fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints. 

    })

【讨论】：

【解决方案3】：

您目前的做法是跳过对话框控制器。

在这种情况下，有三个控制器。

1) 状态控制器 2 对话控制器 3) 组件控制器

正确的做法是：

ctrl.openCampaignSplitDialog = function(ev, split){
        $mdDialog.show({
            template: '<campaign-split-dialog split="split"></campaign-split-dialog>',
            parent: angular.element(document.body),
            targetEvent: ev,
            locals: {split: $ctrl.split}
            controller: function($scope, split){
             $scope.split = split;
            },
            clickOutsideToClose:true,
            fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
        }).then(function(split) {
                ctrl.addCampaignSplit(split);
            }, function() {
                $scope.status = 'You cancelled the dialog.';
            });
    };

这是组件的代码：

angular
.module('app')
.component('campaignSplitDialog', {
    templateUrl: 'app/components/campaignSplitDialog/campaignSplitDialog.html',
    controller: campaignSplitDialogCntrlr,
    bindings:{
        split: '<'
    }
});

/** @ngInject */
function campaignSplitDialogCntrlr($mdDialog) {
    var ctrl = this;
    console.log('splitter', ctrl.split);
}

所以发生的事情是，变量$ctrl.split 使用locals 从状态控制器传递到对话控制器，然后在对话控制器中，将它绑定到$scope，然后从那里你可以传递变量$scope.split 到组件标签，将变量传递给组件bindings

【讨论】：