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: ");
					console.log(newValue); // NEW VALUE equals "promise" and not the query.promise from parent scope, why?
					console.log("Old Value");
					console.log(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;
					});
				}

            }
        };
});