Convert Javascript function to AngularJS function

Question

I wrote a simple javascript function that switches between two div elements. Like so:

function goToResults() {
    document.getElementById("services").style.display = "none";
    document.getElementById("results").style.display = "block";
}

As I am learning Angular, I want to convert that to an Angular function in app.js. Can I do the following?

$scope.goToResults = function () {
    $scope.getElementById("services").style.display = "none";
    $scope.getElementById("results").style.display = "block";
}

Thanks!

Please review all the core directives in left menu of documentation. There are numerous ones available to do this ... ng-style ... ng-class ... ng-if .. ng-show ... ng-hide ... ng-switch .... all are driven by your data model — charlietfl
– charlietfl, Commented Feb 21, 2016 at 0:05

Rus Paul · Accepted Answer · 2016-02-21 00:12:13Z

3

There are a few issues with the piece of code that you provided.

Firstly there are no such thing as AngularJS only functions. They are the same as any other javascript function. If you want to use a "javascript" function inside AngularJS's scope, you can do the following:

function goToResults() {
   ...
}

$scope.goToResults = goToResults;

Secondly, it's considered a bad practice to handle DOM manipulation inside a controller. Use directives instead.

Thirdly, from what I understand you want to show or hide a div based on some event. There are some in-built features that do that exact thing (ng-show, ng-hide, ng-if).

You seem to lack some fundamental knowledge about Javascript & AngularJS, and I'd suggest going through the tutorials given example by Angular's own documentation https://docs.angularjs.org/tutorial

answered Feb 21, 2016 at 0:12

Rus Paul

1,3482 gold badges14 silver badges23 bronze badges

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

2 Comments

OneMoreQuestion Over a year ago

yes I am relatively new to AngularJS, I will look through the tutorials some more

Rus Paul Over a year ago

AngularJS has one of the biggest communities from the whole javascript ecosystem, there are a lot of good tutorials out there. You can also search on youtube for some end-to-end tutorial. Good luck!

Community · Accepted Answer · 2017-05-23 11:59:29Z

-2

It's technically possible to use

$scope.goToResults = function () {
    document.getElementById("services").style.display = "none";
    document.getElementById("results").style.display = "block";
}

However, this isn't a very 'angular' way of doing this. A more 'angular' route is described in the answers to this question. Generally speaking, referring to specific elements isn't the 'angular' way; it seeks to instead have a set of javascript utilities readily available for the (processed) HTML to use, such as directives, which are essentially new elements or attributes for use in HTML. The implementation of the directives has no direct coupling to the elements it modifies with the use of those attributes or elements, which makes angular much more reusable and, in my and many others' opinions, easier to read and write once you get used to it.

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Feb 21, 2016 at 0:08

user70585

1,4191 gold badge15 silver badges20 bronze badges

4 Comments

charlietfl Over a year ago

"The most immediately correct way" ... no it's not

user70585 Over a year ago

Does it not work? I was clear that it's bad practice to do so, but it is the way of doing it most similar to the OP, is it not? (other than just plain JS, but then it isn't a suitable answer)

charlietfl Over a year ago

So why would you offer a first solution that is bad practice and state that it is "correct". Look at your own answer and read nothing but the first line and the code

user70585 Over a year ago

It is correct; it's just bad practice. You yourself called it a 'solution'. I've edited it to be more clear about its being a kluge.

Collectives™ on Stack Overflow

Convert Javascript function to AngularJS function

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related