5

目標: コンポーネントを使用し、$scope を使用してデータを設定することはありません。共有するエラーはありません。問題は、ダイアログがコンポーネントをロードするときにデータ要素が設定されていないことです。スクリーン ショットは、ダイアログの現在の状態を示しています。タブ #2 (情報) にオブジェクトがバインドされているはずです。onComplete イベントを使用して、ダイアログが読み込まれた後にオブジェクト (ドキュメント) が使用可能であることを確認できます。以下の方法で、ダイアログ呼び出しで使用できるデータをコンポーネントにバインドしようとしました。

ここに画像の説明を入力

1 ローカルを使用:

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

2 バインディングを使用:

   bindings: {
         document: '='
    }

3解決を使用：

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

コンポーネント:

エラーはここにあると思います。バインディング、「古い方法」では $scope vars が使用されていたため、バインディングは簡単に配線されました。

(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 イベントが含まれているだけです。locals と bindToController が、ダイアログで指定されたコントローラー (DialogController) をターゲットにしていることに気付きました。ここで困惑しています-ドキュメントをコンポーネントコントローラーに設定/渡す/配線する方法は?

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

        }
4

2 に答える 2

4

DialogController は表示されませんが、おそらくそこに問題があります。コントローラー参照を与えるときは、文字列も与える必要があると思います。

controller: 'DialogController',

$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>

于 2016-07-21T01:29:22.727 に答える
3

もう 1 つの可能性は、scope オプションを使用することです。

const tempScope = $rootScope.$new(true);
tempScope.document = document; // This is the local variable

$mdDialog.show({
    scope: tempScope // Give the scope to the dialog
    parent: parentEl,
    targetEvent: $event,
    template: '<document-edit document="document"></document-edit>', // Use scope
    onComplete: function() {
        console.log('document: %O', document);
    }
});

これにより、テンプレートをコンパイルするための一時的なスコープが作成されます。テンプレート ( ) でデータをバインドする必要がありdocument="document"ますが、中間コントローラーは省略できます。

を使用しresolveて promise を解決する場合は、ダイアログを表示する前に手動で行う必要があることに注意してください。

于 2016-10-18T08:09:03.057 に答える