I've been working on creating a tooltip for my directive, but I'm facing an issue where all four tooltips appear or none at all when clicking on the green div. Can anyone help me figure out what I'm doing wrong?
Check out the Working Plnkr - here
HTML -
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<div class="con-div" ng-repeat="row in fakeDataSet" ng-click="data.clicked = !data.clicked">
<test-div click-val="data.clicked"></test-div>
</div>
</body>
</html>
JavaScript -
var myApp = angular.module('myApp', []);
myApp.controller('mainCtrl', function($scope){
$scope.fakeDataSet = [1,2,3,4];
$scope.data = {};
$scope.data.clicked = false;
});
myApp.directive('testDiv', function(){
return {
restrict: 'EA',
scope: {
clickVal: "="
},
link: function (scope, element, attrs){
console.log("clickVal", scope.clickVal);
},
template: '<div class="tooltip" ng-if="clickVal">This is a tooltip</div>'
};
})