将角形材料将angularjs 1.5组件加载到$ mdDialog中 [英] angular material load angularjs 1.5 component into $mdDialog

问题描述

目标:使用组件而不使用$ scope设置数据.没有共享错误，问题是对话框加载组件时未设置数据元素.屏幕快照显示了对话框的当前状态，在选项卡#2(信息)中应该绑定了一个对象.我可以使用onComplete事件在对话框加载后验证对象(文档)是否可用.我尝试通过以下方式将对话框调用可用的数据绑定到组件:

The goal: to use components and not use $scope to set data. There isn't an error to share, the issue is that the data element isn't set when the dialog loads the component. The screen shot shows the current state of the dialog, there should be an object bound in tab #2 (Info). I can verify the the object (document) is available after the dialog loads using the onComplete event. I've tried to bind the data available to the dialog call to the component in the following ways below:

  locals: {
         document: document     
  },
  bindToController: true,
  onComplete: function(){
                    console.log('document: %O', document);
  }

2使用绑定:

   bindings: {
         document: '='
    }

3使用解决方法:

  resolve: {
              document: function() {
                          return document;
                        }
            }

组件:

我相信这里的错误是绑定，旧方法"使用了$ scope vars，因此绑定工作很轻松.

The component:

I believe the error is here, the bindings, the "old way" used $scope vars so the bindings wired effortlessly.

(function(){
'use strict';
angular.module('adminClientApp')
.component('documentEdit', {
    templateUrl: 'js/app/components/document/documentEdit/document-edit.html',
    controller: function DocumentEditController($mdToast, $mdMedia) {
       var var documentEdit = this;
        documentEdit.document;

       },
       bindings: {
         document: '<'
       }
    });
  })();

对话框调用

DialogController中仅包含$ mdDialog事件.我意识到本地人和bindToController的目标是对话框中指定的控制器(DialogController).我在这里很困惑-如何将文档设置/传递/连接到组件控制器?

the dialog call

the DialogController just has the $mdDialog events in it. I realize that the locals and bindToController are targeting the controller specified in the dialog (DialogController). I'm stumped here - how to set/pass/wire the document to the component controller?

   this.showEdit = function ($event, document) {
                var parentEl = angular.element(document.body);

                $mdDialog.show({
                            parent: parentEl,
                            targetEvent: $event,
                            template: '<div><document-edit document="documentEdit.document"></document-edit></div>',
                            resolve: {
                                       document: function(){ return document;}
                            },
                            controller: DialogController,
                            onComplete: function(){
                                console.log('document: %O', document);
                            }
                        });

        }

推荐答案

您没有显示DialogController，但其中可能存在问题.我相信您在给它一个控制器引用时也需要给它一个字符串，例如

You don't show your DialogController, but there is probably an issue in there. I believe that you also need to give it a string when you give it a controller reference, e.g.

controller: 'DialogController',

请参见下面的示例，该示例显示了如何使用$ mdDialog正确传递值.

See the below example which shows how to pass in values correctly using $mdDialog.

(function() {
  angular
    .module('exampleApp', ['ngAnimate', 'ngAria', 'ngMaterial'])
    .controller('ExampleController', ExampleController);

  function ExampleController($mdDialog) {
    var vm = this;
    vm.dialogTemplate = '<md-dialog><md-dialog-content><document-edit document="vm.document"></document-edit></md-dialog-content></md-dialog>';
    vm.document = {
      id: '11',
      name: 'test',
    };
    vm.showLocalsBindedDialog = function(event) {
      $mdDialog.show({
        template: vm.dialogTemplate,
        targetEvent: event,
        clickOutsideToClose: true,
        escapeToClose: true,
        controller: 'DocumentDialogCtrl',
        controllerAs: 'vm',
        bindToController: true,
        locals: {
          'document': vm.document
        }
      });
    }

    vm.showResolveBindedDialog = function(event) {
      $mdDialog.show({
        template: vm.dialogTemplate,
        targetEvent: event,
        clickOutsideToClose: true,
        escapeToClose: true,
        controller: 'DocumentDialogCtrl',
        controllerAs: 'vm',
        bindToController: true,
        resolve: {
          document: function() {
            return vm.document;
          }
        }
      });
    }
  }
  ExampleController.$inject = ['$mdDialog'];
})();

(function() {
  angular
    .module('exampleApp')
    .controller('DocumentDialogCtrl', DocumentDialogCtrl);

  function DocumentDialogCtrl(document) {
    var vm = this;
    vm.document = document;
  }
  DocumentDialogCtrl.$inject = ['document'];
})();

(function() {
  'use strict';
  angular.module('exampleApp')
    .component('documentEdit', {
      bindings: {
        document: '<'
      },
      template: '<p>ID:{{vm.document.id}}</p><p>NAME:{{vm.document.name}}</p>',
      controller: DocumentEditController,
      controllerAs: 'vm'
    });

  function DocumentEditController() {
    var vm = this;
  }
})();

<!DOCTYPE html>
<html ng-app='exampleApp'>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-aria.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script>
</head>

<body ng-controller="ExampleController as vm">
  <button ng-click="vm.showLocalsBindedDialog($event)">Show dialog with local passed in values</button>
  <button ng-click="vm.showResolveBindedDialog($event)">Show dialog with resolve passed in values</button>
</body>

</html>

这篇关于将角形材料将angularjs 1.5组件加载到$ mdDialog中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！