javascript - Passing a variable to an angular 1.x component that is in a Angular Material Dialog -

i trying pass object component inside angular material dialog.

the function use display dialog is:

    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 // -xs, -sm breakpoints.         }).then(function(split) {                 ctrl.addcampaignsplit(split);             }, function() {                 $scope.status = 'you cancelled dialog.';             });     }; 

this correctly opens dialog.

this code component:

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

the issue arrises fact not sure how pass in split object open dialog function component module. in 'template' url there have split="$ctrl.split". have tried multiple different ways none worked. have tried double brackets, plain variable name, , using controlleras syntax.

i have tried passing value in through dialog using locals:{} paramter because not specify controller, since configured when component called upon, not appear in component.

i'll answer first line of question - "i trying pass object component inside angular material dialog" - way trying achieve doesn't correct.

codepen

markup

<div ng-controller="mycontroller 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();   } }) 

hopefully point in right direction.