JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<div ng-app="app">
    <div first second></div>
</div>

CSS

div[first]{
    background:#e3e3e3;
    padding: .4rem;
    text-align: center;
}

JavaScript

angular.module('app', [])
.directive('first', ['$log', function($log){
    return {
    	restrict: 'A',
        //priority: 1,
        link: function(scope, element, attrs){
            element.attr('someAttr', 1234);
            element.html('I have the attribute value: ' + element.attr('someAttr'));
        }
    };
}])
.directive('second', ['$log', function($log){
	return {
        restrict: 'A',
        //priority: 0,
        controller: function($scope, $element, $attrs){ // no matter if I use link, it won't work
        	$log.log($attrs.someAttr);  // undefined
            //this also wont execute, maybe due to priority
            $element.html( 'Do I have the attribute value?' + $element.attr('someAttr'));
        }
    };	
}]);