Angular directive with data- attribute & controller
HTML
<div ng-app="zippyModule">
<div ng-controller="Ctrl3">
Title: <input ng-model="title">
<hr>
<div data-zippy="zippy" zippy-title="title"></div>
</div>
</div>
JavaScript
function Ctrl3($scope) {
$scope.title = 'Lorem Ipsum';
}
angular.module('zippyModule', [])
.directive('zippy', function(){
return {
restrict: 'A',
replace: true,
scope: { title:'=zippyTitle' },
controller: 'ZippyCtrl',
template: '<input type="text" ng-model="title"style="width: 90%"/>',
link: function(scope, element, attrs, ctrl) {
alert(scope.title);
}
}
}).
controller('ZippyCtrl', ['$scope', function($scope) {
var self = $scope;
return self;
}]);