var app = angular.module('angularjs-starter', ['mydirectives']);
app.controller('MainCtrl', function($scope) {
$scope.firstName = "";
$scope.lastName = "";
$scope.getName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
// add a namespace for custom directives
angular.module('mydirectives', []);
angular.module('mydirectives').directive('blink', function() {
return {
restrict: 'E',
transclude: true,
templateUrl: 'blink.html',
link: function(scope, element, attrs) {
// select the needed DOM elements from the template
var marquee = element.find("marquee");
var input = element.find("input");
// attach a blur event to the input
input.bind('blur', function() {
scope.$apply(function() {
// exit edit mode
scope.editMode = false;
// update the text of the marquee
marquee.text(input.val());
});
});
// edit mode boolean controls the visibility of the blink and input
scope.editMode = false;
// called when the marquee tag is clicked
scope.edit = function() {
scope.editMode = true;
input.val(marquee.text());
};
}
};
});
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<blink>Bring the blink back!</blink>
<blink>NEEDS MOAR BLINK!</blink>
</body>
</html>
<div>
<marquee ng-click="edit()" ng-hide="editMode" scrollamount="100%" ng-transclude></marquee>
<input type="text" ng-show="editMode" >
</div>
/* CSS goes here */