angular ng-attr

by amindunited

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"> </script>
<script src="https://code.angularjs.org/1.4.4/angular-mocks.js"></script>

<div class="exWrap">
    <h3>Attribute Directive:</h3>
    <hr/>
    <div attribute-directive>
        {{ctrl.displayName}}
    </div>
</div>

<div class="exWrap">
    <h3>Element Directive:</h3>
    <hr/>
    <div element-directive>
        {{elCtrl.displayName}}
    </div>
</div>




<div p-form>
    <h1>Div {{pickle}}</h1>
    <ul>
        <li ng-repeat="row in ctrl.rows">
          <p ng-attr-floop="{{row.name==='cheat'? 'cheater': undefined}}">
             {{row.name}}!
          </p>
        </li>
    </ul>
</div>

JavaScript

var app = angular.module('app', []);
/*
	Basic Directive
*/
app.directive('attributeDirective', [function(){
	return {
        scope: true,
    	restrict: 'A',//A for attribute
        controllerAs: 'ctrl',
        controller: function() {
            this.displayName = "Attribute Style";
        }
    }
}]);

app.directive('elementDirective', [function(){

	return {
    scope: {
      dispalyName: '@'
    },
    restrict: 'E',//E for Element
    controllerAs: 'ctrl',
    controller: function() {
      this.displayName = "Element Style";
    }
  }
}]);



app.controller('pFormController', function(){
	this.rows = [{name:'A'}, {name:'B'}, {name:'C'}];
});

app.controller('wazooController', [function(){
	this.rows = [{name:"lie"}, {name:"cheat"}, {name:"steal"}]
}])

app.directive('pForm', ['$controller', function($controller) {
    
  this.pickle = "Gerkin";
	return {
        scope: true,
        controller: 'wazooController',
        controllerAs: 'ctrl',
        bindToController: true
    }
}]);