Обновление входного значения углового материала от JS

Question

Я использую элементы углового материала в проекте. Я хотел бы обновить значение ввода материала из Java Script. Значение правильно привязано к области видимости, но оно не обновляется в поле ввода.

Я создал JSFiddle для этого

HTML

<div data-ng-app="testApp" data-ng-cloak> 
<div id='appCtrl' data-ng-controller="testCtrl"> 
    <button id="button"> 
    Update value in Dialog 
    </button> 

    <span>Value: {{brokenLink}}</span> 
</div> 
</div> 

ANGULAR

var testApp = angular.module('testApp', ['ngMaterial']); 

testApp.controller('testCtrl', function ($scope, $mdDialog, $mdMedia) { 
$scope.brokenLink = "Initial Value"; 

$scope.showDialog = function(ev) { 
      var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && $scope.customFullscreen; 
      $mdDialog.show({ 
        controller: DialogController, 
        template: "<md-dialog aria-label='testArea' ng-cloak flex='66'><form><md-toolbar><div class='md-toolbar-tools'><h2>Add Redirection Link</h2><span flex></span><md-button class='md-icon-button' ng-click='cancel()'><md-icon md-font-icon='fa-times-circle' aria-label='Close dialog' class='fa fa-2x'></md-icon></md-button></div></md-toolbar><md-dialog-content layout='column' style='min-width: 500px'><div class='md-dialog-content'><md-input-container class='md-block'><md-icon md-font-icon='fa-chain-broken' class='fa fa-2x'></md-icon><input id='broken-link' ng-model='brokenLink' type='text' placeholder='Broken Link (required)' ng-required='true'></md-input-container></div></md-dialog-content><md-dialog-actions layout='row'><md-button ng-click='answer()'>Cancel</md-button><md-button ng-click='answer()' style='margin-right:20px;'>Add</md-button></md-dialog-actions></form></md-dialog>", 
        parent: angular.element(document.body), 
        targetEvent: ev, 
        clickOutsideToClose: true, 
        fullscreen: useFullScreen 
       }) 
       .then(function(answer) { 
        $scope.status = 'You said the information was "' + answer + '".'; 
       }, function() { 
        $scope.status = 'You cancelled the dialog.'; 
       }); 
      $scope.$watch(function() { 
       return $mdMedia('xs') || $mdMedia('sm'); 
      }, function(wantsFullScreen) { 
       $scope.customFullscreen = (wantsFullScreen === true); 
      }); 
     }; 

}); 

function DialogController($scope, $mdDialog) { 
     $scope.hide = function() { 
      $mdDialog.hide(); 
     }; 
     $scope.cancel = function() { 
      $mdDialog.cancel(); 
     }; 
     $scope.answer = function(answer) { 
      $mdDialog.hide(answer); 
     }; 
    } 

JAVASCRIPT:

$(document).on("click", "#button", function(){ 
    var scope = angular.element($("#appCtrl")).scope(); 

    scope.$apply(function(){ 

    scope.showDialog(); 
    scope.brokenLink = "Updated from JS"; 

    }); 

}); 

В вышеприведенной скрипке я хочу, чтобы отобразить значение из переменной brokenLink в диалоговое текстовое поле

Answer 1

Вы не должны использовать JQuery для изменения DOM. Вместо этого используйте Угловые встроенные директивы. В этом случае ng-click. В коде это будет что-то вроде этого:

Html:

<button id="button" ng-click="updateValue()"> 
    Update value in Dialog 
</button> 

В контроллере:

$scope.updateValue = function() { 
    $scope.brokenLink = "Updated from JS"; 
} 

Edit: А использовать значение brokenLink в вашем DialogController, используйте mdDialog местные жители, как это:

$mdDialog.show({ 
    ... 
    locals: { brokenLink: $scope.brokenLink } 
    ... 
}); 

function DialogController($scope, $mdDialog, brokenLink) { 
    $scope.brokenLink = brokenLink; 
    ... 
}); 

Редактировать снова: вот обновленный JSFiddle: http://jsfiddle.net/hcpay1zm/172/