How to prevent ng-model to override value of input text generated by directive

Question

I have directive to set some values of form

lightconsole.directive("injectSession", function () {
    return function (scope, element, attrs) {
        var paramInput = angular.element(element).find("input")
        if (paramInput) {
            var paramName = scope.param.name.toLowerCase();
            var sessHolder = angular.element("#user_session");
            if (paramName === "session" || paramName == "sessionid") {
                paramInput.val(sessHolder.val());
                sessHolder.bind("change", function (session) {
                    paramInput.val(sessHolder.val());
                });
            }
        }
    }
});

then I created a form with ng-repeat:

<form ng-submit="callFun()">
    <table class="materail_input_block">
        <thead>
        </thead>
        <tr ng-repeat="param in fun.operationArguments" inject-session>
            <td>{{param.type}}</td>
            <td>{{param.name}}</td>
            <td><input name="{{param.name}}"
                       class="form-control materail_input" type="text"
                       placeholder="enter value"/></td>
        </tr>

    </table>
    <input type="submit" value="Call"/>
</form> );

In this case, everything works fine if one of the element is named session, value form hidden input is set as input value, but when I add ng-model to the input element then value is erased.

remove paramInput and use the scope like `scope.myModel = sessHolder.val()` and on input just add `ng-model="myModel"` — Jose Rocha, Dec 10 '15 at 12:15
Thank You @JoseRocha that work well. But could u please explain why setting value on input element didnt work ? — Krzysztof Szewczyk, Dec 10 '15 at 14:04

score 2 · Accepted Answer · edited May 23 '17 at 12:30

Sorry to write this as answer but it was too long to do it as comment. This probably is not the best explanation that i can give, but basically you were mixing jquery/javascript with angular. When you define in some input a ng-model the scope will watch every change on that ng-model to the scope.model that you give to him so to modify the value in code you have to change the scope.model trying to change it with javascript will not update the scope.model so will not "trigger" the scope.watch.

You can see this stackoverflow question if you want to apply changes by javascript to angular scope.

But i since you are using angular i would recommend to resolve every possible thing with angular and not mix.

How to prevent ng-model to override value of input text generated by directive

1 Answers1