2

これは、Angular マテリアル、mdDialogs、およびスコープ変数に関する質問です。

  • Stomp を使用して特定のトピックを購読しています。
  • Stomp はサーバーから文字列を受け取り、スコープ変数に連結されます。
  • ユーザーがボタンをクリックして mdDialog を表示します。
  • mdDialog は、着信文字列の変更をテキストエリアに表示する必要があります。

でも・・・うまく動かない。変更を確認するには、ダイアログを閉じて再度開く必要があります。メイン ビュー (index.html) に textarea を追加しようとしましたが、textarea は正常に動作します。

Angular マテリアルの mdDialog 内にいるときにテキストエリアが変更されないのはなぜですか? それを解決するためのアイデアはありますか？

これはプランカーです。メイン ビュー (index.html) でランダム値が適切に更新されていることがわかりますが、ダイアログを開くと、値が適切に更新されません...

https://plnkr.co/edit/teC69Sg7UqNbouHxpT22

var angularInstance = angular.module('ExampleApp', ['ngMaterial', 'ngMessages']) ;

angularInstance.controller('ExampleCtrl', function ExampleCtrl($scope, $mdDialog, $mdMedia, $interval)
{
    $scope.randomString = "" ;

    $scope.initialization = function()
    {
      $interval($scope.addRandomChar, 1000) ; 
    }

    $scope.addRandomChar = function()
    {
      $scope.randomString = $scope.randomString + "a" ;
    }

  $scope.openMyDialog = function(ev)
    {
        var useFullScreen = ($mdMedia('sm') || $mdMedia('xs'))  && $scope.customFullscreen ;
        $mdDialog.show({
            controller: myDialogController,
            templateUrl: 'myDialog.tmpl.html',
            parent: angular.element(document.body),
            targetEvent: ev,
            clickOutsideToClose:true,
            fullscreen: useFullScreen,
            resolve: 
            {
                randomString: function ()
                {
                    return $scope.randomString ;
                }
            }
        }) ;
    }
});

function myDialogController($scope, $mdDialog, randomString) 
{
    $scope.randomString = randomString ;

    $scope.close = function ()
    {
        $mdDialog.cancel() ;
    };
}

どうもありがとう。

4

1 に答える 1

2

ここに作業中のプランカーがあります

要約すると、 localsを使用して、 ExampleCtrltoから params を渡す方法を少し変更しました。myDialogController

$mdDialog.show({
    controller: myDialogController,
    templateUrl: 'myDialog.tmpl.html',
    targetEvent: ev,
    locals: {parent: $scope},
    clickOutsideToClose:true,
    ...

次に、ダイアログ コントローラーで、すべての親スコープにアクセスできます。

function myDialogController($scope, $mdDialog, parent) {
    $scope.parent = parent;

    ...
}

parent.randomString最後に、ビューで textareaにバインドするだけで、ng-model期待どおりに機能します。

<textarea ... ng-model="parent.randomString"/>

乾杯。それが役に立てば幸い。

于 2016-06-27T15:15:15.663 に答える