AngularJS - Simple Directive Use
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" ng-controller="MyCtrl">
<div ui-bar my-arg="i">I should change to iambar</div>
<button ng-click="inc()">click</button>
</div>
CSS
.ui-state-highlight { background-color: #EEEEEE; }
JavaScript
angular.module('myApp', [])
.directive('uiBar',
function() {
return {
restrict: 'EAC',
scope: {
myArg: '=',
},
link: function($scope, element, attrs, controller) {
var controllerOptions, options;
$scope.$watch('myArg', function(value){
element.text('i=' + value);
});
}
};
}
).controller('MyCtrl', function($scope){
$scope.i = 1;
$scope.inc = function(){
$scope.i += 1;
console.log($scope.i);
};
});