Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>Directive Communication: API Proxy</title>
</head>
<body ng-controller="ctrl as vm">
    <div>
        <span ng-bind="vm.Time"></span>
        <button ng-click="vm.Refresh()">Refresh</button>
    </div>
    <hr />
    <div server-time time="vm.Time" api-proxy="vm.ApiProxy"></div>
​
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
    <script>
​
        function myViewModel($scope) {
            var self = this;
            self.Time = null;
            self.ApiProxy;
            self.Refresh = function () {
                self.ApiProxy && self.ApiProxy.Refresh && self.ApiProxy.Refresh();
            }
        }
        myViewModel.$injector = ["$scope"];
        function serverTime($http) {
            return {
                scope: {
                    time: "=",
                    apiProxy: "="
                },
                link: function (scope, element, attr) {
                    function refresh() {
                        $http.get("/").success(function (data, status, headers) {
                            scope.time = headers("date");
                        });
                    }
                    refresh();
                    scope.apiProxy = {
                        Refresh: refresh
                    };
​
                },
                template: "<pre>Server Time : {{time}}</pre>"
            };
        }
        serverTime.$inject = ["$http"];
​
        angular.module("app", [])
        .controller("ctrl", myViewModel)
        .directive("serverTime", serverTime);
    </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
darkthreadpro
0viewers