ngDialog игнорировать атрибут NG в формах в AngularJS 1.5

Question

У меня есть этот вызов внутри директивы контроллера

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

Составная часть

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

HTML для обоих

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

Когда я нажимаю на кнопку Button on, я вижу сообщение SENDED на консоли, но для компонентов просто выглядит, как игнорирование каждого атрибута NG, щелчки по кнопке ничего не делают, но загружают шаблон правильно.

Тот же шаблон, все то же самое, Это точно то же самое, так что, может быть, это ошибка типа ngDialog с компонентами, верно?

Я просто хочу, чтобы ng-атрибуты работали внутри, и если я нажму кнопку "Отправить", закройте диалоговое окно и получите сообщение журнала обещаний.

Проверьте пример Plunkr

Директива также не срабатывает, если я использую свойство scope: { obj: '=' } внутри нее. Компоненты игнорируют все.

Я думаю, что это какая-то проблема с областями действия - объявление области действия в директиве (или привязка в компоненте) - и область действия в объекте openDialog

Answer 1

Опоздал на вечеринку, но все же, если кто-то борется с той же проблемой...

Хитрость в том, что компоненты всегда создаются с изолированными областями. В вашем примере с Plunkr, когда вы устанавливаете шаблон для ngDialog.openConfirm (), область действия ngDialog фактически является родительской областью для вашего пользовательского компонента, поэтому неудивительно, что он не распознает методы closeThisDialog() и verify (): они просто делают не существует в своей "дочерней / изолированной" области.

Но они существуют в своей "родственной" области - области, которую создает ngDialog. Итак, чтобы иметь возможность общаться с этой областью, мы должны установить хуки между изолированной ("дочерней") областью компонента и его "родственной" областью действия - областью действия ngDialog.

Небольшое изменение в вашем коде делает волшебство. Мои комментарии начинаются с //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');
      });
    }

И сам компонент:

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