AngularJS - Simple Directive Use

by javierif

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-app="myApp">
    <div ui-foo>I should change iamfoo</div>
    <br>
    <div ui-bar att-label="HELLO">I should change to iambar</div>
</div>

CSS

.ui-state-highlight { background-color: #EEEEEE; }

JavaScript

angular.module('ui.directives', []).directive('uiBar',
    function($parse,Data) {
      return {
        restrict: 'EAC',
        require: '?ngModel',
        link: function($scope, element, attrs, controller) {
          var controllerOptions, options;
          element.text(attrs.attLabel);
          Data.setDataDirectives(attrs.attLabel);
        }
      };
    }
  )
  .directive('uiFoo', 
    function(Data) {
      return {
        restrict: 'EAC',
        require: '?ngModel',
        link: function($scope, element, attrs, controller) {
          var controllerOptions, options;
          var changeattr = function() {
          	element.text('iamfoo 4324242'+Data.getDataDirectives())
          }
	          $scope.$watch(function(){return Data.getDataDirectives();},function(newValue,oldValue) {
           changeattr();
          })
        }
      };
    }
  );
  
angular.module('ui.factory',[]).factory('Data',
function() {
var dataDirectives;
return {
	setDataDirectives: function(data){
  		dataDirectives = data;
  },
  getDataDirectives: function() {
  	return dataDirectives;
  }
}
})
angular.module('myApp', ['ui.directives','ui.factory']);