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>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.3/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <button ng-click="more()">more</button>
<div test="item" ng-repeat="item in items"></div>
</body>
</html>
 
.throbber {
  position: absolute;
  top: calc(50% - 16px);
  left: calc(50% - 16px);
}
 
angular
.module("app", [])
.run(function ($rootScope) {
  $rootScope.items = ["One", "Two"];
  $rootScope.more = function () {
    $rootScope.items.push(Math.random());
  };
})
.factory("throbber", function () {
  var visible = false;
  var throbber = document.createElement("img");
  throbber.src = "http://upload.wikimedia.org/wikipedia/en/2/29/Throbber-Loadinfo-292929-ffffff.gif";
  throbber.classList.add("throbber");
  function show () {
    document.body.appendChild(throbber);
  }
  function hide () {
    document.body.removeChild(throbber);
  }
  return {
    show: show,
    hide: hide
  };
})
.directive("test", function ($templateCache, $http, $timeout, $compile, $q, throbber) {
  var template = "<div>{{text}}</div>";
  var templateUrl = "templateUrl";
​
  return {
    link: function (scope, el, attr) {
      var tmpl = $templateCache.get(templateUrl);
      
      if (!tmpl) {
        throbber.show();
        tmpl = $timeout(function () {
          return template;
        }, 1000);
      }
      
      $q.when(tmpl).then(function (value) {
        $templateCache.put(templateUrl, value);
        el.html(value);
        $compile(el.contents())(scope);
        throbber.hide();
      });
    },
    scope: {
      text: "=test"
    }
  };
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers