将 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 不会在 ngModel 文本字段上持续存在.该对象具有“名称”属性集。它在文本字段中出现一秒钟然后消失。然后，如果我再次尝试打开对话框，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”的值，一旦设置好，然后使用“showDialog”按钮修复 ng-click 问题。

提前致谢！

Answer 1

由于scope: $scope,，$mdDialog 改变了指令范围

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