带有ng-model的Angular 6自定义指令 [英] Angular 6 custom directive with ng-model

问题描述

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

This is the directive i have created using 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);
        }
    }
}])

我正在像

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

HTML可以按预期方式呈现，但是更改文本字段的值时，作用域中的 RootObjectName 模型永远不会更新.

Html is rendered as expected but the RootObjectName model in the scope is never updated when value of the text field is changed.

请帮助 谢谢

推荐答案

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

After spending almost 3 days i'm finally able solve this ,here is what i've done just in case if it helpful for somebody

这是指令

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

Here is the html i needed directives

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

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

If there is a better way please do let me know

这篇关于带有ng-model的Angular 6自定义指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！