ngDialog ignore NG attribute within forms in AngularJS 1.5

Question

i have this call inside a controller Directive

ngDialog.openConfirm({
        template          : '<form-directive></form-directive>',
        plain             : true,
        closeByNavigation : true,
        scope             : $scope
      })
      .then(function( response ) {
          $log('SENDED');
  });

Component

ngDialog.openConfirm({
        template          : '<form-component></form-component>',
        plain             : true,
        closeByNavigation : true,
        scope             : $scope
      })
      .then(function( response ) {
          $log('SENDED');
      });

HTML for both

<form ng-submit="alert("Hello !!!")">
   <button type="submit">Send</button>
</form>

When i click the Button on directive, i see the SENDED message on the console, but for components just looks like ignore every NG-attribute, clicks on the button do nothing, but load the template rightfully.

Same template, same everything, Is exactly the same, so maybe is a ngDialog kind of bug with the components right ?

I just want the ng-attributes working inside and if i click button submit then close the dialog and get the promise log message

Check the Plunkr Example

The Directive also fail if i use the scope: { obj : '=' } property inside it The components ignore everything.

I think is some kind of problem with the Scopes - The scope declaration in the directive ( or the binding in the component ) - And the scope in the openDialog object

Answer 1

Late to the party, but still, in case there's someone struggling with same problem...

The trick here is that components are always created with isolated scopes. In your Plunkr example, when you set a template for ngDialog.openConfirm(), the ngDialog's scope is actually a parent scope for your custom component, so no wonder it does not recognize the closeThisDialog() and confirm() methods: they simply do not exist in its "child/isolated" scope.

But they exist in its "sibling" scope - the scope that ngDialog creates. So, to be able to communicate to that scope we have to setup hooks between the component's isolated ("child") scope and its "sibling" scope - ngDialog's scope.

A tiny change to your code does the magic. My comments start with //AK:

function openNgDialogComponent() {
      ngDialog.openConfirm({
        //AK: the 'form-component' itself exists in context of scope, passed below, hence we can bind $scope's methods to component's internal scope
        template          : '<form-component on-resolve="confirm()"' +
                                'on-reject="closeThisDialog()"></form-component>',
        scope             : $scope,
        plain             : true,
        closeByNavigation : true
      }).then(function(deployData) {
        $log.debug('Form parameters succesfully returned');
      });
    }

And the component itself:

// Component declaration
// /////////////////////////
(function() {
  'use strict';
  angular
    .module('app')
    .component("formComponent", {
      bindings: { onResolve: "&", onReject: "&" }, //AK: declare delegates bindings
      controller: "ComponentController",
      controllerAs: "vm",
      template: 
        '<form ng-submit="confirm()">' + 
          '<h3>Im a Component form</h3>' +
          '<button ng-click="vm.reject()">Close Dialog</button>' +
          '<button ng-click="vm.resolve()" class="submit">CONFIRM Component Form</button> ' +
        '</form>' //AK: buttons now call internal methods, which, in  turn call delegate methods passed via bindings
    });
 })();

// Component Controller
// /////////////////////////
(function() {
  'use strict';
  angular
    .module('app')
    .controller('ComponentController', ComponentController);

  function ComponentController() {
    var vm = this;
    vm.title = "I'm the Component controller"
    vm.resolve = () => vm.onResolve();//AK: call on-resolve="..." delegate
    vm.reject  = () => vm.onReject(); //AK: call on-reject="..." delegate
  }
})();