ngDialog игнорировать атрибут НГ внутри форм в 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> 

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

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

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

Check the Plunkr Example

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

Я думаю, что это какая-то проблема с Скоупсом - Область декларации в директиве (или связывание в компоненте) - И область в объекте OpenDialog

Answer 1

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

Фокус в том, что компоненты всегда создаются с изолированными областями. В вашем Plunkr Например, при установке шаблона для ngDialog.openConfirm(), сфера охвата ngDialog является на самом деле родитель возможности для пользовательского компонента, поэтому не удивительно, что он не признает closeThisDialog() и Confirm() методы: они просто не существуют в своей «дочерней/изолированной» сфере.

Но они существуют в области «родной» - области, которая ngDialog создает. Таким образом, чтобы иметь возможность связываться с этой областью, мы должны установить привязки между выделенной областью («дочерним») компонента и областью «sibling» - ngDialog's.

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