主控制器中的更改时,mddialog textarea模型未更新

时间:2016-06-22 15:22:20

标签: angularjs dialog angular-material customdialog mddialog

这是关于Angular Materials,mdDialogs和范围变量的问题:

  • 我使用Stomp订阅特定主题。
  • Stomp从服务器接收字符串变量中连接的字符串。
  • 用户点击按钮以显示mdDialog。
  • mdDialog应该在textarea中显示传入的字符串更改。

但......它运作不正常。我必须关闭并重新打开对话框以查看更改。我试图在主视图(index.html)中添加textarea,textarea正常工作。

当我们在Angular Materials中的mdDialog里面时,为什么它不改变textarea?有什么想法解决它?

这是你可以看到主视图(index.html)正确更新随机值的plunker,但如果打开对话框,该值将无法正确更新...

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

非常感谢。

1 个答案:

答案 0 :(得分:2)

  

这里有working plunker

总结一下,我使用当地人略微改变了将ExampleCtrl传递给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"/>

干杯。希望它有所帮助。