我正在为我的指令创建一个工具提示，但不知何故，要么全部四个都会出现，要么在绿色 div 中单击时不会出现。让我知道我在这里做错了什么。
工作 Plnkr - https://plnkr.co/edit/Rk2hMz6gmKPlN3IhKMYE?p=preview
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>'
};
})
最佳答案
您正在将指令的所有 4 个实例绑定(bind)到同一作用域。这样的事情将为您的每个实例创建一个单独的状态。如果您将单击事件绑定(bind)到一个函数，该函数在设置事件之前重置所有的truthy/falsys，它只会保持一个打开状态。
<div class="con-div" ng-repeat="row in fakeDataSet" ng-click="setToolTip(row)">
<test-div click-val="data.clicked[row]"></test-div>
</div>
$scope.fakeDataSet = [1,2,3,4];
$scope.data = {};
$scope.data.clicked = {1: false, 2: false, 3: false, 4:false};
$scope.setToolTip = function(row){
Object.keys($scope.data.clicked).forEach(function(elem){
$scope.data.clicked[elem] = false;
});
$scope.data.clicked[row] = true;
}
关于javascript - 一次显示一个隐藏指令 - AngularJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37124537/