ngDialog ignorieren NG innerhalb Formen in AngularJS Attribut 1.5

Question

Ich habe diesen Aufruf in einem Controller Richtlinie

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

Komponente

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

HTML für beide

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

Wenn ich das Klicken Taste auf Direktive, sehe ich die Nachricht SENDED auf der Konsole, aber für die Komponenten sieht einfach so aus, als würde man jedes NG-Attribut ignorieren, klickt auf die Schaltfläche nichts tun, , aber laden Sie die Vorlage zu Recht.

Gleiche Vorlage, alles gleich, Ist genau das gleiche, also ist vielleicht ein ngDialog Art von Bug mit den Komponenten richtig?

Ich will nur die ng-Attribute innen arbeiten und wenn i-Taste klicken Sie auf Absenden schließen Sie den Dialog und das Versprechen Lognachricht

Check the Plunkr Example

Die Richtlinie ist auch bekommen scheitern, wenn ich den Bereich zu verwenden: {obj : '='} Eigenschaft drin Die Komponenten ignorieren alles.

ich denke, ist eine Art von Problem mit dem Scopes - Die Erklärung Anwendungsbereich die Richtlinie (oder die Bindung in der Komponente) - Und der Umfang im Open Objekt

Answer 1

spät zur Party, aber immer noch , falls jemand mit demselben Problem kämpft ...

Der Trick dabei ist, dass Komponenten immer mit isolierten Bereichen erstellt werden. Wenn Sie in Ihrem Plunkr-Beispiel eine Vorlage für ngDialog.openConfirm() festlegen, ist der Bereich des ngDialogs tatsächlich ein übergeordneter Bereich für Ihre benutzerdefinierte Komponente. Es ist also kein Wunder, dass er die nicht erkennt. CloseThisDialog() und confirm() Methoden: Sie existieren einfach nicht in ihrem "Kind/isoliert" Bereich.

Aber sie existieren in seinem "Geschwister" Anwendungsbereich - der Bereich, den ngDialog erstellt. Um mit diesem Bereich kommunizieren zu können, müssen wir daher Hooks zwischen dem isolierten ("untergeordneten") Bereich der Komponente und ihrem "gleichgeordneten" Bereich - ngDialogs Bereich einrichten.

Eine kleine Änderung an Ihrem Code macht die Magie. Meine Kommentare beginnen mit // 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'); 
     }); 
    } 

Und die Komponente selbst:

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