feat(dialog): support using AngularJS 1.5+ components directly

[knvpk]

Actual behavior:

• What is the issue? *
  $mdDialog service is not working with angular 1.5 components.

      $mdDialog.show({
                    template: "<task-show  task="task"></task-show>",
                    autoWrap: false,
                    parent: angular.element(document.body),
                    targetEvent: ev,
                    openFrom: {
                        left: 2500,
                        top: 0,
                        width: 50,
                        height: 500
                    },
                    locals:{
                        task:task
                    },
                    closeTo: {
                        left: 2500,
                        top: 0,
                        width: 50,
                        height: 500
                    },
                    resolve: {
                        module: ['$q', function ($q) {

                            $ocLazyLoad.load({
                                name: module.name
                            });
                        }]
                    }
                }).then(function (message) {

                }, function (cancelmessage) {
                    //console.log(cancelmessage);
                });

May the problem with template, it is not accepting the task as input. which is binding for taskShow component

• What is the expected behavior?
  It should open an dialog with given component template

CodePen or Steps to reproduce the issue: *

• CodePen Demo which shows your issue :
• Details:

Angular Versions: *

• Angular Version: 1.5.5
• Angular Material Version: 1.0.6

Additional Information:

• Browser Type: chrome
• Browser Version: 50
• OS: ubuntu
• Stack Traces: it clear that task in the input template not coming to controller.

---

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[devversion]

Everything works for me perfectly.

• http://codepen.io/DevVersion/pen/wGOPgz?editors=1010

Please modify the codepen to represent your issue.

I guess, your dialog is not opening, because you set autoWrap to false.

[knvpk]

Hi @devversion , From your demo code i understand that i want to pass the scope:$scope without that it throws some error. but when im trying to send oinly one scope object rather than full $scope it is throwing the error scope.$new is not a function

scope:{
   textInput:$scope.textInput
}

[devversion]

@pavankumarkatakam That's true. It seems like our compiler does not support this concept.

I can see the relevance and think it would be a good enhancement for the $$interimElement factory.

[jdddog]

A related point, it would be nicer if there was a property where you could set the name of the component, rather than writing out the whole template in the template property. You can do this in ui-router 1.0.0-alpha.4. It would come in handy when you want to programmatically set the component, otherwise you will need to fiddle with strings etc.

$mdDialog.show({
    component: 'taskShow',
    parent: $rootElement,
    scope: $scope,
    preserveScope: true,
    clickOutsideToClose: true
});

[Shaunwei]

I think this demo is broken. I am running to this issue today.

[joaovieira]

@Shaunwei the demo just worked for me. I'd also add a note, that, if you don't want to pollute the current scope you can create an isolate scope instead:

ctrl.openItem = function(item, $event){
  // not polluting current $scope...
  var scope = angular.extend($scope.$new(true), {
    item: item
  });

  $mdDialog.show({
    template: '<test item="item"></test>',
    scope: scope
  });
};

[AntonisFK]

@joaovieira From your example I wasn't able to bind the data to the component. However I was able to access the data in the dialog controller by using $scope.$parent.item

[joaovieira]

http://codepen.io/anon/pen/RoGNmm

[albertosantini]

If the component uses templateUrl (vs. template), a blank dialog is opened, because the opacity is zero (on md-dialog element) as if the animation is not ended.

Maybe a race condition between the animation and the loading of the template.

Edit: http://plnkr.co/edit/GceMCA99eY9ZaTKSEKl6?p=preview
Edit2: without <md-dialog> element, wrapping the dialog, the content is displayed (with a few warnings)

[codymikol]

I may take a stab at this sometime in the near future

[Splaktar]

@codymikol that would be great. Please let me know how I can help 😄

[ewahner]

Is there any movement to directly support "component" as a property of the show() like they have had in bootstrap angularjs since 1.5?

[Splaktar]

@ewahner nothing more than you can see here in this issue. A PR for this would be welcomed and I can provide some support to the author.

[Splaktar]

As mentioned in #10508 (comment), any implementation of this will need to ensure that autoWrap works properly with both template and templateUrl.