I have form with dynamic inserted input to the DOM (from some other plugin). Is there way to read value from this input without ng-model on it?

<form name="myForm" data-my-directive>
    <div class="customPlugin">
        <!-- here input without ng-modeal appears: -->
        [ <input type="text" name="foo" value="bar" /> ]
    </div>
</form>

I look at many examples, but everywhere people writes about ng-model... :(

I have form with dynamic inserted input to the DOM (from some other plugin). Is there way to read value from this input without ng-model on it?

<form name="myForm" data-my-directive>
    <div class="customPlugin">
        <!-- here input without ng-modeal appears: -->
        [ <input type="text" name="foo" value="bar" /> ]
    </div>
</form>

I look at many examples, but everywhere people writes about ng-model... :(

• javascript
• angularjs

• Hi can you setup a fiddle with your plugin/extension or even name it to get started? – d.h. Commented Mar 22, 2016 at 17:27
• Just to get you startet here is a solution using dom manipulation via a controller: stackoverflow./a/31741293/3298029 which adds the ng-model dynamically. – d.h. Commented Mar 22, 2016 at 17:33
• 1 You can try with angular.element: docs.angularjs/api/ng/function/angular.element – Yosvel Quintero Commented Mar 22, 2016 at 17:33
• What exactly do you want to do with this value? Because if it is just reading it all you would need is to use jQuery to monitor/read the values of that input. – Jon Commented Mar 22, 2016 at 17:36
• 1 If you are doing DOM manipulation outside of Angular, you may want to rethink how you are managing your application as you won't be leveraging the application state management features Angular provides. – Chic Commented Mar 22, 2016 at 18:18

2 Answers 2

Use a directive that watches for changes.

You can then assign this to your scope, if deemed necessary.

.directive('watchForChanges', function () {
        return {
            link: function(scope, element, attrs) {
                element.on('change', function (e) {
                  console.log(e.target.value);
                  // scope.myValue = e.target.value;
                })
            }
        }
});

PLNKR: http://plnkr.co/edit/qrj8ZbUya5wE0EylFcGG?p=preview

You can use a directive:

JSFiddle

.directive('myDirective', function() {
    return {
        link: function(scope, element, attrs) {
            console.log(element.find('input').attr('value'));
        }
    };
});