将 md-dialog 中的值绑定到指令中的 ng-model

Question

来这里之前，我翻了很多问题，但没有找到解决我问题的问题。所以我在这里。

我创建了这个指令：

.directive('myDirective', {'$mdDialog',
    function($mdDialog){
    return {
        restrict: 'E',
        templateUrl: TEMPLATE_URL,
        scope: {
            type: '@',
            fieldName: '@',
            ngModel: '='
        },
        link: function($scope, $element, $attrs){
            $scope.close = function(){
                $mdDialog.cancel();
            }

            $scope.selectItem= function(item){
                $scope.ngModel = item;
                $mdDialog.hide();
            };

            $scope.showDialog= function(){
                var options = {
                    templateUrl: MODAL_TEMPLATE_URL,
                    scope: $scope,
                    controller: 'MyController'
                };

                $mdDialog.show(options);
            };
        }
    };
}]);

该指令打开一个对话框（使用 Angular Material）并且其中的所有内容都正确呈现，但是有一个调用 "selectItem" 函数并传入对象（项目）的 ng-click 没有' t 保留在 ngModel 文本字段上。该对象具有 "Name" 属性集。它在文本字段中出现一秒钟然后消失。然后，如果我尝试再次打开对话框，ng-click 不会再触发 "showDialog" 函数。

这是指令模板：

<md-input-container class="field-result">
    <label>{{fieldName}}</label>
    <input type="text" ng-model="ngModel.Name" ng-disabled="true">
</md-input-container>
<md-button class="md-icon-button md-raised icon icon-button icon-search" ng-click="showDialog()"></md-button>

所以这就是我想要的：使用 ngModel 在文本字段上显示属性 "Name" 的值，一旦设置，并修复 [=28 的 ng-click 问题=] 按钮。

提前致谢！

Answer 1

由于scope: $scope,

，$mdDialog 更改了指令范围

您需要在对话框选项中添加 preserveScope: true,。看到这个 plunker

将 md-dialog 中的值绑定到指令中的 ng-model

Binding value in md-dialog to ng-model in directive

javascript

angularjs

material-design

angular-material