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

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

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 с компонентами, верно?

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

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

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

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


javascript angularjs angularjs-scope ng-dialog angular-controller
person Héctor León    schedule 06.06.2016    source источник

Ответы (1)


arrow_upward
5
arrow_downward

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

Хитрость здесь в том, что компоненты всегда создаются с изолированными областями. В вашем примере 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
  }
})();
person Alan    schedule 30.12.2016