Assign jquery variable to a angularjs variable

Question

How can i assign a jquery element to angularjs? i tried:

var scope = $scope;
scope.project = $( "#project" ).val();

But it didn't worked for me. Someone has a solution for this?

Thanks in advance

You should never run your jquery code inside your controller.Rather than trying to make this work, try to find out how to avoid this. — Abhishek Jain
– Abhishek Jain, Commented Jan 30, 2015 at 11:40
Why do you have to do this at all? Can't you add ng-model="project" to the input field? — JJJ
– JJJ, Commented Jan 30, 2015 at 11:41
those input field i generate dynamically. Each field has a id. For this example, the field Project has the id project. I need that variable for my request, which i send to my server. So i need that variable. I don't like to use $( "#project" ).val(); — Bleistift
– Bleistift, Commented Jan 30, 2015 at 11:45

DonJuwe · Accepted Answer · 2015-01-30 12:06:38Z

1

Bind a model via ng-model attribute to your input and access it whenever you want to use it:

Fiddle

Moreover, as @Abhishek Jain pointed out, you should never use jQuery code within your controller. You could use a directive for that.

edited Jan 30, 2015 at 12:06

answered Jan 30, 2015 at 11:48

DonJuwe

4,5634 gold badges37 silver badges60 bronze badges

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

4 Comments

Bleistift Over a year ago

i also tried $scope.project = $("#project").val(); but didn't work. But how do i get those value without using jquery code?

DonJuwe Over a year ago

please provide some more of your code, especially when you want to get the value. fiddle would be nice.

Bleistift Over a year ago

jsfiddle.net/cty7nta1/1 I'm just testing, what's possible with jquery and angularjs

DonJuwe Over a year ago

Well, normally you would use ng-model at this input. When you do your ajax call you can access all those scope values by their model. See my updated answer.

Igor Monteiro · Accepted Answer · 2016-12-07 12:35:32Z

0

I guess that is the best way:

put inside your jquery event..

$(document).ready(function () {
    var controllerElement = document.querySelector('[ng-controller="yourController"]');
    var scope = angular.element(controllerElement).scope();
    scope.$apply(function () {
        scope.yourProperty = 'your value';
    });
});

answered Dec 7, 2016 at 12:35

Igor Monteiro

9531 gold badge12 silver badges29 bronze badges

Collectives™ on Stack Overflow

Assign jquery variable to a angularjs variable

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related