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

问题描述

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

myProSupMod.directive('dfct', ['$compile', function ($compile) {返回 {限制:'E'，范围: {ngModel: '='},模板:<div class='divRow'><div class='divCell label-column'></div><div class='divCell'><input ng-model='ngModel'/></div></div>",替换:真的，要求:'ngModel'，链接:函数($scope，elem，attr，ctrl){$compile(elem)($scope.$parent);}}}])

我正在像

一样从 html 调用指令

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

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

请帮忙谢谢

解决方案

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

这是指令

myProSupMod.directive('dfct', ['$compile', function ($compile) {返回 {限制:'E'，范围: {模型:'=ngModel'，类型:'@type'，文字:'@text'},模板:<div class='divRow'><div class='divCell label-column'>{{text}}</div><div class='divCell'><input type='{{type}}' data-ng-model='model'/>

",替换:真的，要求:'^ngModel'，链接:函数($scope，elem，attr，ctrl){$compile(elem)($scope.$parent);}}}])

这是我需要的 html 指令

<dfct ng-model='RootObject[""+c.ModelName+""]' type="{{c.HTMLControlType}}" text="{{c.LabelText}}"></dfct>

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

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);
        }
    }
}])

And i'm calling the directive from html like

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

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

please help Thanks

解决方案

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

Here is the directive

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);
        }
    }
}])

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屋！