CODEWITHSUNDEEP
javascriptjqueryangularjsangularjs-directivedirective
Valentin Blokhin
Valentin Blokhin

Reputation: 515

How to set value to element in directive template with jQuery

I have some directive and some template in it. 

angular.module('testModule', [])
    .directive('testInput', function () {
        var id = 1;
        return {
            restrict: 'E',
            replace: true,
            scope: {
                model: '='
            },
            template: '<div><input type="text" id="{{uniqueId}}"/></div>',
            link: function (scope) {
                scope.uniqueId = "test" + id++;

                $('#' + scope.uniqueId).val(33);
            }
        }
    });

I want to set value to element with uniqueId, but I can't do it. Can you help me? There is example on Plunker: example. Thanks.

Edit.

I find another solution.

        .......
 template: '<div><input type="text" id="{{uniqueId}}" ng-value="someModel"/></div>',
        link: function (scope, elem, attrs) {
            scope.uniqueId = "test" + id++;
            scope.someModel = 887;
        }
        .......

Example: Plunker

Upvotes: 0

Views: 1368

Answers (1)

Dan Moldovan
Dan Moldovan

Reputation: 3591

JQuery unfortunately goes outside angular's $digest cycle. The easier way is using what the link function normally provides, which is access to three variables scope, elem and attrs so you could go about doing something like this:

link: function (scope, elem, attrs) {
        scope.uniqueId = "test" + id++;
        elem.children().first()[0].value = 33;
    }

Here's a fork of your plunk that works

http://plnkr.co/edit/j1bheHFhkKobb2bWPeRQ?p=preview

Upvotes: 2

Related Questions