AngularJS with TextArea and Scroll To

posted in: Uncategorized | 0

This is part four of my look into AngularJS.

  1. AngularJS Intro and Setup
  2. AngularJS and Modernizr
  3. AngularJS and jQueryUI DatePicker
  4. AngularJS with TextArea and Scroll To
  5. AngularJS and Javascript Tips
  6. Coming soon…

 

Using textarea For Multiline Input

In AngularJS this is how you would use textarea in HTML.

For more information on attributes that are available, read the textarea article on the Mozilla Developer Network.

To display the text from the textarea that has multiple lines in the view, you can do something like the following:

For more about this see the discussion: angularjs newline filter with no other html.

 

Scroll To Element

In AngularJS, when trying to do <a href="#">back to top</a>, it does not work properly. What happens is the whole website is reloaded instead of just going to the top of the page. This is where scroll to a particular element using id="name" attribute in the HTML page comes in.1

First, in the directives.js add the following code that would animate the scrolling to a particular element in the webpage:

What does restrict: 'A' mean? It means it only matches the attribute name.

In the next line, the scope: {...} means:

What we want to be able to do is separate the scope inside a directive from the scope outside, and then map the outer scope to a directive’s inner scope. We can do this by creating what we call an isolate scope.2

In the HTML you would add id="top-scroll" to any element ( <ANY>...</ANY> ):

1 ScrollTo function in AngularJS
2 Creating Custom Directives