將變量傳遞給位於角度材質對話框中的角度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