Angular Tests

by Marc Malignan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="main" ng-app="app">

  <div id="user" ng-controller="UserCtrl as user">
    <form class="form-horizontal">
      <div class="form-group">
        <div class="col-xs-6">
          <input class="form-control" type="text" ng-model="user.name">
        </div>
      </div>
    </form>
    <greetings name="user.name"></greetings>
  </div>
  
  <hr>
  
  <div id="boot" ng-controller="BootstrapCtrl as boot">
    <form class="form-horizontal">
      <div class="form-group">
        <div class="col-xs-6">
          <input class="form-control" type="text" ng-model="boot.glyph">
        </div>
        <div class="col-xs-6">
          <input class="form-control" type="text" ng-model="boot.color">
        </div>
      </div>
    </form>
    <h1>
      <glyph glyph-class="boot.glyph" color="boot.color"></glyph>
    </h1>
  </div>
  
</div>

CSS

#main {
  padding: 20px;
  background: #fff;
}

#boot .glyphicon {
  font-size: 70px;
}

JavaScript

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

app.controller('UserCtrl', function() {
	this.name = 'Marc';
});
app.directive('greetings', function() {
	return {
  	restrict: 'E',
    replace: true,
    scope: {
    	name: '='
    },
    template: '<h1>Hello {{name}} !</h1>'
  }
});

app.controller('BootstrapCtrl', function() {
	this.glyph = 'heart';
  this.color = 'pink';
});
app.directive('glyph', function() {
	return {
  	restrict: 'E',
    replace: true,
    scope: {
    	glyphClass: '=',
      color: '='
    },
    template: '<span class="glyphicon glyphicon-{{glyphClass}}" style="color:{{color}}"></span>'
  }
});