JSFiddle - React, Tailwind, and code Playground

by cebjyre

HTML

<div ng-app="test">
    <div ng-controller="testCtrl">
        <outer item="thing"></outer>
    </div>
</div>

JavaScript

angular.module('test', []).factory('getter', function(){
    return {
        get: function(){
            return {
                greeting: 'hello world',
                contents: 'lorem ipsum etc'
            };
        }
    };
})
.directive('outer', function(){
    return {
        restrict: 'E',
        scope: {item: '='},
        link: function(scope){
            scope.created = new Date();
            scope.item.prom.then(function(){scope.updated = new Date();});
        },
        template: '<h1>{{item.prom.greeting}}</h1><inner prom="item.prom" item="item" created="created" updated="updated"></inner>'
    };
})
.directive('inner', function(){
    return {
        restrict: 'E',
        scope: {prom: '=', created: '=', updated:'=', item: '='},
        controller: function($scope){
            $scope.cmesg = {controlled: true};
        },
        template: '<div>{{prom.contents}}</div><sub>C: {{created}}/U: {{updated}}</sub><p>{{cmesg}}</p><p>{{lmesg}}</p>',
        link: function(scope){
            //scope.item.prom.then(function(){console.log(scope.item.prom);});
            //scope.prom.then(function(){scope.created='yep';});
            scope.lmesg = {linked:true};
        }
    };
});

function testCtrl($scope, $q, getter, $timeout) {
    var deferred = $q.defer();
    
    $scope.thing = {prom:deferred.promise};
    
    $timeout(function(){
        deferred.resolve(getter.get());
    }, 1000);
}