AngularJS Populating input field with directive but not captured in $scope

Ryan W Kan Published at Dev

Ryan W Kan

When I populate an input field from within a directive, it shows on the DOM, but $scope is not capturing the value. How do I fix it so that $scope captures the new info?

How to reproduce the behaviour from my Fiddle:

Click Fill with Directive
Click Log
--> $scope.input val is undefined

Fill input with 'asdf'
Click Log
--> $scope.input val is 'asdf'

Fill input with 'abcd'
Click Fill with Directive
--> DOM shows 'quick brown fox'
Click Log
--> $scope.input val is 'abcd'

My code is here: JSFiddle

JS:

'use strict';

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope){
    $scope.logResult = function(){
        console.log($scope.input);
    }
});

app.directive('fillInput', function(){
    return {
        link: function($scope, elem){
            $scope.fillFormDirective = function() {
                console.log(elem);
                elem.val('quick brown fox');
            }        
        }
    };
});

HTML:

<div ng-controller='myCtrl'>

    <div>
        <input type="text" ng-model="input.weird" id="inputField" fill-input />
    </div>

    <div>
        <button ng-click="fillFormDirective()" >Fill With Directive</button>
    </div>   

    <div>
        <button ng-click="logResult()">Log Result</button>
    </div>

</div>

Ryan W Kan

Solution from this SO thread:

Update Angular model after setting input value with jQuery

Working Plunkr: http://plnkr.co/edit/QKDaHT3CllyBtrRPdYUr?p=preview

Basically, quoting @Stewie,

ngModel listens for "input" event, so to "fix" your code you'd need to trigger that event after setting the value:

      elem.bind("click", function(e){
        console.log(elem);

        newElem.val('quick brown fox');
        newElem.triggerHandler('input'); <-----This line of code fixed the problem
      });

Collected from the Internet

Please contact [email protected] to delete if infringement.