How to apply a directive into dynamic input?

[shuffledex]

I'm very confused to apply a directive into a dynamic input.

My JSON is like this:

      "text": {
        "attributes": {
          "own-validator": "something"
        },
        "type": "text",
        "placeholder": "text",
        "required": "true"
      },

My directive:

.directive('ownValidator', function () { return { restrict: 'A', scope: { 'inputDefinition': '=ownValidator' }, require: 'ngModel', link: function (scope, element, attrs, ctrl) { console.log(scope, element, attrs, ctrl) } } })

So when the input is rendered and I try to write something into the input, error console's is showing.

What is the best way to apply a directive? Thanks a lot!

[danhunsaker]

What does the console show? This looks like it should work...

[shuffledex]

I was very sure this line made the necessary to compile the input: $compile(newElement)($scope)

The input rendered is: < input type="text" name="text" ng-model="stdFormData['text']" ng-required="true" placeholder="text" own-validator="something" required="required" >

Te console output when I try to write something into the input:

TypeError: Cannot set property 'text' of undefined at D.assign (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:73:448) at td.$setViewValue (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:140:392) at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:113:26 at Object.$get.e.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:89:39) at Object.$get.e.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:89:146) at HTMLInputElement.h (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:113:6) at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:24:155 at Array.forEach (native) at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:6:192) at HTMLInputElement.c (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:24:126)

[danhunsaker]

That looks like you don't have a text key in your form's model...

[shuffledex]

What do you mean? the ng-model is dynamically generated... so when I write the first time, the ng-model has not yet setting the key? and this is why the directive brokes? How can I solve it?

[danhunsaker]

It's entirely unrelated to your directive. When your form is built, the ng-model of the <dynamic-form> tag is used to define an object model, which then contains the various form elements' models as keys - submodels, if you will. In this case, that means $scope.stdFormData needs to have a text property defined in your controller: $scope.stdFormData.text = null; That should fix the error you're seeing at the moment.

As to your directive, if you're looking to get updates when the input value changes, you'll need to set up a watcher on the model. There might be a better hook you could use, depending on what you're aiming to do; check the Angular docs, or do a web search for validation directives, for more info on what to do with your directive here.

[danhunsaker]

@shuffledex - Have you figured this one out? I was mistaken a few comments prior to this one: it's not that you didn't have a text key on your form model, but rather that you hadn't defined your form model within the form's $scope. You'll need to be sure you include $scope.stdFormData = {}; in your controller - setting $scope.stdFormData.text would require you to do that first anyway, but isn't necessary in itself.