Month: June 2015

How to insert html into a view (Mini-challenge 6) Answer

Posted on by jomendez

This is the answer to the Mini-challenge 6 How to insert html code into a view in a controller variable

Check out Mini-challenge 6 Instructions to insert html code into a view

Answer:How to insert html into a view (Mini-challenge 6) Answer

It is not trivial to print an html in the angularjs view where the content is stored in a variable in the scope.

For Angular 1.3 you can use ng-bind-html in the HTML view:


<div ng-bind-html="html"></div>

and you can use $sce service in the controller to convert the html string.

 $scope.html = $sce.trustAsHtml("
<div>Hello World</div>

");

Notes for Angular 1.2, use:

<div ng-bind-html="html"></div>

The "OLD WAY" to do this is:

<div ng-bind-html="expression"></div>
//instead of
<div>{{expression}}</div>

 

Here is a working example:

If you have a solution for this challenge, different from the proposal solution on this post, don't be shy and share it with us 🙂

How to insert html into a view (Mini-challenge 6)

Posted on by jomendez

Mini-Challenge 6

ng-challengeAngularJs Mini-Challenges is a growing collection of "Challenges" about the most quirky parts of the AngularJs framework. It encourage you to find and fix common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert AngularJs programmers may encounter on their endeavours into the depths of the framework.

AngularJs Mini-Challenges does not aim to teach you AngularJs. Former knowledge of the Framework is strongly recommended in order to understand the topics covered in this Challenges. In order to learn the basics of the Framework, please head over to this excellent book:

 

book

Book Tip

ng-book - The Complete Book on AngularJS
Ready to master AngularJS? What if you could master the entire framework – with solid foundations – in less time without beating your head against a wall?


Amazon

 

The Challenge:

The requirement is that part of the HTML that needs to be rendered in the view, should be processed/created in the controller, and then rendered in the html view.

This challenge is about to insert html into a variable in the controller, and then print the html in the view, the method described below is not working, the challenge is for you to find a solution. See code example below:

View:

<div>{{html}}</div>

Controller:

    function myController($scope) {

       $scope.html = "<b>HTML inseted</b>";
};

see jsfiddle: https://jsfiddle.net/s03cauau/8/

Here you can find a possible solution

If you feel that the solution is poor or incomplete or there is room for improvement, please share with every one, you can leave a comment.

 

Debugging Two ways, to see the content of an scope var (Mini-challenge 5) Answer

Posted on by jomendez

Check out Mini-challenge 5 Instructions

Answer:
Debugging Two ways, to see the content of an scope var (Mini-challenge 5) Answer

To answer this challenge we going to show to ways to see the content of a variable in the scope when debugging an AngularJs application.

One way to do it is using the Angular JSON filter in the view, this will print the content of the variable:

<div>{{vm | json}}</div>

The other way to do it, is writing the following code in the browser developer console:

angular.element($('#main')).scope()

where $('#main') is an element inside of the controller that you want to see the variable's content. See a working example below.

If you have a solution for this challenge, different from the proposal solution on this post, don't be shy and share it with us. 🙂

Debugging Two ways, to see the content of an scope var (Mini-challenge 5)

Posted on by jomendez

Mini-Challenge 5

ng-challengeAngularJs Mini-Challenges is a growing collection of "Challenges" about the most quirky parts of the AngularJs framework. It encourage you to find and fix common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert AngularJs programmers may encounter on their endeavours into the depths of the framework.

AngularJs Mini-Challenges does not aim to teach you AngularJs. Former knowledge of the Framework is strongly recommended in order to understand the topics covered in this Challenges. In order to learn the basics of the Framework, please head over to this excellent book:

 

book

Book Tip

ng-book - The Complete Book on AngularJS
Ready to master AngularJS? What if you could master the entire framework – with solid foundations – in less time without beating your head against a wall?


Amazon

 

The Challenge:

Find two (or more) ways to see the content of the controller's scope variable, without adding breakpoints in the browser's developer console. Below we proposed a solution. That doesn't mean those are the only solutions. Please feel free to leave a comment with your ingenious solution to see the scope variable content.

Note: A tip for developing with angularJs use - Batarang chrome extension: chrome.google.com/webstore/detail/angularjs-batarang-stable/ This extension will allow you to see the scope variables among other things.

Hint: This is how it should looks like.

scope in the browser console

Here you can find a possible solution

If you feel that the solution is poor or incomplete or there is room for improvement, please share with every one, you can leave a comment.