angular transclude

by chad

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<div ng-controller="MyCtrl">
    <button save-button class="green">Save</button><br>
    <button save-button class="green">Save</button>
    <li ng-repeat="message in pq">{{ message }}</li>
</div>

CSS

.green {
    background-color: #0c0;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px;
}
.spinner {
    display: inline-block;
    border-radius: 50%;
    background-color: #09f;
    width: 14px;
    height: 14px;
    margin-left: 8px;
}

JavaScript

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

myApp.directive('saveButton', function(){
        return {
          transclude: true,
          scope: true,
          template: '<span ng-transclude></span>' +
                    '<span class="spinner" ng-show="spin.show"></span>',
          link: function(scope, element){
              scope.spin = {show: false};
              scope.toggleSpinner = function() {
                  console.log(scope.spin);
                  scope.spin.show = !scope.spin.show;
                  scope.$apply();
              }
              element.bind('click',scope.toggleSpinner);
          }
        };
    });

myApp.factory('TestPromise', function($q, $timeout) {
    var getMessages = function() {
      var deferred = $q.defer();
    
      $timeout(function() {
        deferred.resolve(['Hello', 'world']);
      }, 2000);
    
      return deferred.promise;
    };
    
    return {
      getMessages: getMessages
    };
});

myApp.controller('MyCtrl', function($scope,TestPromise) {
    $scope.pq = TestPromise.getMessages();
});