Update Angular Material Input Value from JS

Question

I am using Angular material elements in a project. I would like to update material input value from Java Script. Value correctly bound to scope but it is not updating in input box.

I've created a JSFiddle for this

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";

  });

});

In the above fiddle I want to display the value from the variable brokenLink to the dialog textbox

henrikmerlander · Accepted Answer · 2016-03-14 08:22:13Z

1

You should not use jQuery to modify the DOM. Use Angular built in directives instead. In this case ng-click. In your code it will be something like this:

Html:

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

In the controller:

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

Edit: And to use the brokenLink value in your DialogController, use mdDialog locals like this:

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

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

Edit again: Here is the updated JSFiddle: http://jsfiddle.net/hcpay1zm/172/

edited Mar 14, 2016 at 8:22

answered Mar 14, 2016 at 7:59

henrikmerlander

1,58413 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ramesh Kannan Over a year ago

Thanks for your suggestion. Inheriting the parent scope does the trick in my case. jsfiddle.net/arasu_rrk/hcpay1zm/170

Collectives™ on Stack Overflow

Update Angular Material Input Value from JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related