Angular: how to get input value without ng-model

Question

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... :(

Hi can you setup a fiddle with your plugin/extension or even name it to get started? — d.h.
– 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.com/a/31741293/3298029 which adds the ng-model dynamically. — d.h.
– d.h., Commented Mar 22, 2016 at 17:33
You can try with angular.element: docs.angularjs.org/api/ng/function/angular.element — Yosvel Quintero
– 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
– Jon, Commented Mar 22, 2016 at 17:36
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
– Chic, Commented Mar 22, 2016 at 18:18

nikk wong · Accepted Answer · 2016-03-22 17:36:48Z

3

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

answered Mar 22, 2016 at 17:36

nikk wong

8,8386 gold badges60 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

michelem · Accepted Answer · 2016-03-22 17:32:40Z

2

You can use a directive:

JSFiddle

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

answered Mar 22, 2016 at 17:32

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Collectives™ on Stack Overflow

Angular: how to get input value without ng-model

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related