JSFiddle - React, Tailwind, and code Playground

by wittwerj

HTML

<body ng-app="myApp">
    <div ng-controller="MyCtrl">{{ test.foo }}
        <!-- <outer param="test">
        </outer>
        -->
        <loader promise="query" object="blabla">test</loader>
        <button ng-click="clicked()">click</button>
    </div>
</body>

JavaScript

var myApp = angular.module('myApp', []);

    myApp.controller('MyCtrl', function ($scope, $q, $timeout) {
        $scope.test = {
            'foo': 'bar'
        };

        var deffered = $q.defer();



        $scope.clicked = function () {

            $timeout(function () {
                $scope.query = deffered;
            }, 3000);
        };

    });

    myApp.directive("loader", function () {
        return {
            scope: {
                object: '=',
                promise: '='
            },
            restrict: 'E',
            transclude: true,
            template: '<div ng-show="!loading && !error" ng-transclude></div>',
            link: function (scope) {
                console.log(scope);

                scope.watch('promise', function (newValue, oldValue) {
                    console.log("New Value: ",newValue); // NEW VALUE equals "promise" and not the query.promise from parent scope, why?
                    console.log("Old Value", oldValue);
                    console.log("value changed");
                    console.log(scope.promise);
                    execute();
                });

                execute();

                function execute() {
                    if (!angular.isDefined(scope.promise)) { // $scope.promise is undefined when called by watch
                        console.log("not defined");
                        console.log(scope);
                        return;
                    }

                    console.log("execute");

                    $scope.loading = true;
                    $scope.promise().then(function (result) {
                        $scope.object = result;
                        $scope.loading = false;
                    }, function () {
                        $scope.loading = false;
                        $scope.error = true;
                    });
                }

            }
        };
    });