Data with Directive - Angular

Data with Directive - Angular

by Andrew Pougher

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<h2>List Dynamic with Directive</h2>
<div ng-app="myApp" ng-controller="Ctrl" class="list-group">
  <div class="thing list-group-item" ng-repeat="thing in things" andrew>
     {{thing}}
  </div>
  
    <div ng-click="changeit()" class="btn btn-default btn-block btn-info">Load new data  </div>
</div>
<script>
	/* http://bit.ly/ARP71 */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-4809804-1', 'auto');
  ga('send', 'pageview');
  </script>

JavaScript

function Ctrl($scope) {
  $scope.things = [
    'Wisconsin', 'Mullard', 'Coryn'  ,'Ferro'
  ];
    $scope.changeit = function() {
     $scope.things = [
    'Mina', 'Migration', 'Clarice'  ,'Fee', 'Andrew'
  ];
    }
}

angular.module('myApp', [])

.directive('andrew', function() {
  return function($scope, $element, $attrs) {
    if ($scope.$last){
      // iteration is complete, do whatever post-processing
      // is necessary
      $element.parent().css('border', '2px solid #cecece');
    }
  };
  

});