lcValidationSummary - Sample 04 - Using a custom template

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@1.2.16" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="http://rawgit.com/Lemoncode/lc-validation-summary/master/build/lcvalidationsummary.js"></script>
    <script src="custom-tpl.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="custom.css" />
  </head>

  <body ng-app="sampleApp" ng-controller="sampleController" lc-validations-container="">
    <form name="userForm">
      <label for="userName">Name:</label>
      <input id="userName" name="userName" class="form-control" type="text" ng-model="model.name" ng-required="true" lc-validation-bubble="" validation-friendly-name="User Name" />
      <label for="userSurname">Surname:</label>
      <input id="userSurname" class="form-control" name="userSurname" type="text" ng-model="model.surName" ng-required="true" lc-validation-bubble="" validation-friendly-name="User Surname" />
    </form>
    
    <div lc-validation-summary=""></div>
  </body>

</html>

var sampleApp = angular.module('sampleApp', ['lcValidationSummary'])

.controller('sampleController', ['$scope', function sampleController($scope){	
	$scope.model = {
		email:"",
		confirmationEmail:""
	}
}]);

/*<=validation summary styles>*/

.validation-summary-box {
    color: white;
    padding: 0px;
    margin-top: 20px;
    padding-bottom: 15px;
    margin-bottom: 10px;
    width: 100%;
    background-color:#EDEDED;
}

.validation-summary-title {
    margin-left:40px;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 20px;
    background-color: #E8705B;
}

.validation-summary-box ul {
   
}

.validation-summary-box li {
    color: #1D4343;
    font-weight: bold;
}

.validation-summary-title h4{
    font-size: 1.2em;
    margin-left:10px;
}

.summaryTitle h4 {
    font-size: 1.2em;
    margin-left:38px;
}

.summaryTitle {
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    background-color: #3AA9AB;
    font-family: Verdana;
}
/*<#validation summary styles>*/

Sample code for the [lcValidationSummary](http://lemoncode.github.io/lc-validation-summary/) tutorial.

angular.module('lcValidationSummary').run(['$templateCache', function($templateCache) {
  'use strict';

  $templateCache.put('./src/directives/lcValidationSummary.html',
    "<div class='validation-summary-box'\n" +
    "        ng-show='validationsSummary.length>0'\n" +
    "    >\n" +
    "    <div class=\"summaryTitle\">\n" +
    "        <h4>Please review the following fields:</h4>\n" +
    "    </div>\n" +
   
   
    "            <ul>              \n" +
    "                <li ng-repeat='item in validationsSummary'>{{item.errorMessage}}</li>                                \n" +
    "            </ul>\n" +
   
    
    "</div>\n" +
    "    \n"
  );

}]);