javascript - 从 JS 更新 Angular Material 输入值

Question

我在项目中使用 Angular Material 元素。我想从 Java 脚本更新 Material 输入值。值已正确绑定(bind)到范围，但未在输入框中更新。

我创建了一个 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";

  });

});

在上面的 fiddle 中，我想将变量 brokenLink 的值显示到对话框文本框

Answer 1

您不应使用 jQuery 修改 DOM。请改用 Angular 内置指令。在本例中 ng-click。在您的代码中，它将是这样的:

HTML:

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

在 Controller 中:

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

编辑:要在 DialogController 中使用 brokenLink 值，请像这样使用 mdDialog locals:

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

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

再次编辑:这是更新后的 JSFiddle:http://jsfiddle.net/hcpay1zm/172/