JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div ng-app="MyApp">
   <hello></hello>
   
   <user username="huseyinbabal" avatar="https://www.gravatar.com/avatar/ef36a722788f5d852e2635113b2b6b84?s=128&d=identicon&r=PG" reputation="8012"></user>
</div>

http://code.tutsplus.com/tutorials/mastering-angularjs-directives--cms-22511

JavaScript

var app = angular.module("MyApp",[]);

app.directive("hello",function(){
	return{
     restrict: 'E',
     template: '<div>Hi there....</div>',
     replace: true
  }
});

app.directive("user", function() {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            scope.username = attrs.username;
            scope.avatar = attrs.avatar;
            scope.reputation = attrs.reputation;
        },
        template: '<div>Username: {{username}}, Avatar: {{avatar}}, Reputation: {{reputation}}</div>'
    }
})

var  objCat_subLabels_html = "<select>";
            _.originalList.forEach(function(item){
                objCat_subLabels_html += "<option>" + item.storeFront +"</option>";
            });
            objCat_subLabels_html += "</select>";
            /*objCategories.originalListMobile: Array[2]}*/

            $("#hierarchyTree").append(objCat_subLabels_html);

            $("#hierarchyTree select").live("change", function(){
                var selectedOption = $("#hierarchyTree select option:selected" ).text();
                _.originalList.forEach(function(elem){
                    if(elem.storeFront === selectedOption) _.subLabels = elem.labelNodeDTOList;
                    return;
                });
            });