2016-06-22 2 views
1

Это вопрос о Угловых Материалах, mdDialogs и области видимости переменные:mddialog модели TextArea не обновляется, когда изменения в главном контроллере

  • Я подписался на определенную тему с использованием Stomp.
  • Stomp принимает строки с сервера, что они объединены в переменной области.
  • Пользователь нажимает кнопку, чтобы показать mdDialog.
  • mdDialog должен показывать изменения входящей строки в текстовом поле.

Но ... он не работает должным образом. Мне нужно закрыть и снова открыть диалог, чтобы увидеть изменения. Я попытался добавить текстовое поле в основное представление (index.html), и текстовое поле работает правильно.

Почему он не меняет текстовое поле, когда мы находимся внутри mdDialog в угловых материалах? Любая идея решить его?

Это plunker вы можете увидеть главный вид (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() ; 
    }; 
} 

Большое спасибо.

+1

Не могли бы вы создать Plunker или что-то в качестве примера проблемы? –

ответ

1

Здесь у вас есть 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 к текстового ng-model, и он будет работать как вы ожидаете:

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

Cheers. Надеюсь, поможет.

+1

Большое спасибо за вашу помощь :) Он работает правильно! – pakkk

+0

Рад помочь – troig

+0

Еще один вопрос: В моем коде мне пришлось включить «$ scope. $ Apply()» после обновления поля (если нет, Angular обновил мой текст через несколько секунд). Проблема здесь в том, что диалог кажется заблокированным, когда я пытаюсь его закрыть. Я думаю, это потому, что «$ scope. $ Apply» потребляет слишком много времени. Вы знаете другой способ вместо использования «$ scope. $ Apply()»? – pakkk

Смежные вопросы