将变量传递给位于角度材质对话框中的角度1.x组件

Question

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

我用它来显示对话框的功能是：

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对象传递从打开的对话框功能部件模块。在“模板”网址中，我有split="$ctrl.split"。我尝试了多种不同的方法，但都没有成功。我已经尝试了双括号，普通变量名称，并使用了controllerAs语法。

我也曾尝试使用locals:{}放慢参数传递值通过对话，而是因为我没有指定控制器，因为当组件被要求它被配置，它不会出现在组件中。

Answer 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> 

JS

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(); 
    } 
}) 

希望这将指向你在正确的方向。

Answer 2

查看属性选项。 当地人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. 

    }) 

Answer 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是从状态控制器到对话控制器使用g locals，然后在对话框控制器中，将其绑定到$scope，然后从那里将变量$scope.split传递给组件标签，将变量传递给组件bindings