带有 ng-model 的 Angular 6 自定义指令答案

【问题标题】：Angular 6 custom directive with ng-model带有 ng-model 的 Angular 6 自定义指令
【发布时间】：2018-08-22 11:41:26
【问题描述】：

这是我使用 Angular 6 创建的指令

myProSupMod.directive('dfct', ['$compile', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            ngModel: '='
        },
        template: "<div class='divRow'><div class='divCell label-column'> 
</div><div class='divCell'><input ng-model='ngModel' /></div></div>",            
        replace: true,
        require: 'ngModel',
        link: function ($scope, elem, attr, ctrl) {                
            $compile(elem)($scope.$parent);
        }
    }
}])

我正在从 html 中调用指令，例如

<dfct ng-model="RootObjectName"></dfct>

Html 按预期呈现，但范围内的 RootObjectName 模型在文本字段的值更改时永远不会更新。

请帮忙谢谢

【问题讨论】：

@MichaelCzechowski 评论应该是建设性的。请阅读Code of Conduct 和Expected Behavior 以查看如何在不苛刻的情况下将用户指向替代解决方案的示例。干杯。

标签： angularjs angular6

【解决方案1】：

花了将近 3 天后，我终于能够解决这个问题，这就是我所做的以防万一它对某人有帮助

这是指令

myProSupMod.directive('dfct', ['$compile', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            model: '=ngModel',
            type: '@type',
            text:'@text'
        },
        template: "<div class='divRow'><div class='divCell label-column'>{{text}} 
        </div><div class='divCell'><input type='{{type}}' data-ng-model='model' /> 
        </div> 
        </div>",
        replace: true,
        require: '^ngModel',
        link: function ($scope, elem, attr, ctrl) {
            $compile(elem)($scope.$parent);
        }
    }
}])

这是我需要的html指令

<div class="divRow" ng-repeat="c in Data.Controls">
                <dfct ng-model='RootObject[""+c.ModelName+""]' type=" 
{{c.HTMLControlType}}" text="{{c.LabelText}}"></dfct>
        </div>

如果有更好的方法请告诉我

【讨论】：