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

【问题标题】：ngDialog ignore NG attribute within forms in AngularJS 1.5ngDialog 忽略 AngularJS 1.5 中表单中的 NG 属性
【发布时间】：2016-06-06 06:26:32
【问题描述】：

我在控制器中有这个调用指令

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

Check the Plunkr Example

如果我在其中使用范围：{ obj : '=' } 属性，该指令也会失败组件忽略一切。

我认为 Scopes 存在某种问题 - 指令中的范围声明（或组件中的绑定） - 以及 openDialog 对象中的作用域

【问题讨论】：

标签： javascript angularjs angularjs-scope angular-controller ng-dialog

【解决方案1】：

聚会迟到了，但是，万一有人遇到同样的问题……

这里的诀窍是组件总是使用孤立的范围创建的。在您的 Plunkr 示例中，当您为 ngDialog.openConfirm() 设置模板时，ngDialog 的范围实际上是您的自定义组件的父范围，因此难怪它无法识别 closeThisDialog( ) 和 confirm() 方法：它们根本不存在于其“子/隔离”范围内。

但它们存在于它的“同级”范围内 - ngDialog 创建的范围。因此，为了能够与该范围通信，我们必须在组件的隔离（“子”）范围和它的“兄弟”范围 - ngDialog 的范围之间设置挂钩。

对您的代码进行微小的更改就可以发挥作用。我的 cmets 以 //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
  }
})();

【讨论】：