HG2D - TemplateUrl in Directive

Learn How to use TemplateUrl option in AngularJS Directive

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<!doctype html>
<html lang="en" ng-app="App">
<head>
  <script type='text/ng-template' id='whoiam.html'>
		<ul ng-repeat="stat in statsList">
        <li>
            <div>{{stat.text}}</div>
            <input data-ng-model="answers[stat.value]">
            <input type="checkbox" data-ng-model='answers[stat.value]' id="checkbox_{{stat.text}}">
        </li>
    </ul>
    
    <a ng-click="ShowAnswers()">Submit</a>
    
  </script>
</head>
<body style='padding:30px;'>
  <div whoiam>This text will be overwritten</div>
</body>
</html>

JavaScript

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

App.directive('whoiam', function($http) {
    return {
        restrict: 'A',
        templateUrl: 'whoiam.html',
        link: function(scope, element, attrs) {

            scope.answers = {mean: true};

 						scope.statsList = [
                    { text: 'Mean', value: 'mean' },
                    { text: 'Median', value: 'median' },
                    { text: 'Standard deviation', value: 'stddev' },
                    { text: 'Standard error', value: 'se' },
                    { text: 'sum', value: 'sum' },
                    { text: 'Minimum', value: 'min' },
                    { text: 'Maximum', value: 'max' },
                    { text: 'Count', value: 'counts' }
                ];

            scope.ShowAnswers = function() {
                console.log(scope.answers);
            };

        }
    };
});