ngDialog忽略AngularJS 1.5中表单中的NG属性

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-attributes在里面工作,如果我点击按钮提交然后关闭对话框并获得promise日志消息

检查Plunkr示例

如果我使用范围,指令也会失败:其中的{obj:'='}属性组件忽略了所有内容.

我认为是Scopes的某种问题 - 指令中的范围声明(或组件中的绑定) - 以及openDialog对象中的范围

Answer 1

迟到了,但是,如果有人在努力解决同样的问题......

这里的技巧是组件始终使用隔离范围创建.在Plunkr示例中,当您为ngDialog.openConfirm()设置模板时,ngDialog的范围实际上是自定义组件的父范围,因此难怪它无法识别closeThisDialog()和confirm()方法:它们只是做不存在于其"子/孤立"范围内.

但它们存在于其"兄弟"范围内 - 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
  }
})();