CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat
sisimh
sisimh

Reputation: 1337

ng-model with isolated scope directive

I have an isolated directive as an element

How can I bind the ngmodel of it since the return html is being overrided ?

<div ng-repeat="x in list">
    <form-element ng-model="value[x.name]"></form-element>
</div>

I am having troubles adding the ngmodel to it

JS :

app.directive('formElement', function($compile) {
    return {
        restrict: 'E',
        scope   : {
            type : '=' 
            } ,
        link : function(scope, element, attrs) {
                scope.$watch(function () {                      
                        return scope.type ;
                }, function() {
                    var templates           = {};

                    templates['text']       = '<input type ="text" name="{{name}}">' ;
                    templates['radio']      = '<input ng-repeat="option in optionsList" name="{{name}}" type="radio">';


                    if (templates[inputType]) {
                        scope.optionsList   = scope.type.data;
                        scope.name          = scope.type.name;

                        element.html(templates[scope.type.inputType]);
                    } else {
                        element.html("");
                    }
                    $compile(element.contents())(scope);
                }

                );  
            }   
        } 
});

Thanks in advance

Upvotes: 1

Views: 1785

Answers (2)

Militello Vincenzo
Militello Vincenzo

Reputation: 187

What you are doing is to call a property of your isolated scope "ngModel", but you are not using the ngModelController. This doesn't mean that you are using the ngModel directive provided by Angular.

You can change the name of your ngModel property in any other name on your directive, and it should works fine.

Using ngModel it means that you add the require:'ngModel'" prop. in your directive object.

 return {
  restrict: 'E',
  require:'ngModel',
  scope: {
    type: '='
  }

and in the link function use the ngModelController to access to the $viewValue

function(scope, element, attrs, ngModelCtr)
{
  var mymodel=ngModelCtr.$viewValue;
}

Here more info. https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

As you want the ng-model to introduced inside the field created by the directive you could inject that ngModel inside isolated scope.

Markup

<div ng-repeat="x in list">
    <form-element ng-model="x.value" type="x.inputType"></form-element>
</div>

Directive

app.directive('formElement', function($compile) {
  return {
    restrict: 'E',
    scope: {
      type: '=',
      ngModel: '='
    },
    link: function(scope, element, attrs) {
        var templates = {};
        templates['text'] = '<input type ="text" name="{{name}}" ng-model="ngModel">';
        templates['radio'] = '<input ng-repeat="option in optionsList" name="{{name}}" type="radio">';
        if (templates[scope.type]) {
          scope.optionsList = scope.type.data;
          scope.name = scope.type.name;
          element.append($compile(templates[scope.type])(scope));
        } else {
          element.html("");
        }
        //$compile(element.contents())(scope);
    }
  }
});

Demo Plunkr

Upvotes: 1

Related Questions