关于angularjs：主控制器中的更改未更新mddialog textarea模型


mddialog textarea model is not updated when changes in the main controller

这是有关角材料，mdDialogs和范围变量的问题：

  • 我订阅了使用Stomp的特定主题。
  • Stomp从服务器接收在范围变量中串联的字符串。
  • 用户单击按钮以显示mdDialog。
  • mdDialog应该在文本区域中显示传入的字符串更改。

但是...它无法正常工作。我必须关闭并重新打开对话框才能看到更改。我试图在主视图(index.html)中添加textarea，并且textarea正常工作。

当我们在Angular Materials的mdDialog中时，为什么不更改文本区域？有解决的办法吗？

这是一个小工具，您可以看到主视图(index.html)正确更新了随机值，但是如果打开对话框，该值将无法正确更新...

https://plnkr.co/edit/teC69Sg7UqNbouHxpT22

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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() ;
    };
}

非常感谢。

相关讨论

Here you have a working
plunker

总而言之，我已经使用本地语言对将参数从ExampleCtrl传递到myDialogController的方式进行了略微更改。

1
2
3
4
5
6
7
$mdDialog.show({
    controller: myDialogController,
    templateUrl: 'myDialog.tmpl.html',
    targetEvent: ev,
    locals: {parent: $scope},
    clickOutsideToClose:true,
    ...

然后，在对话框控制器中，您可以访问所有父范围：

1
2
3
4
5
function myDialogController($scope, $mdDialog, parent) {
    $scope.parent = parent;

    ...
}

因此，最后，在视图中，您只需要将parent.randomString绑定到textarea ng-model，它将按您期望的那样工作：

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

干杯。希望对您有所帮助。

相关讨论