一度に1つずつディレクティブを表示する - AngularJS

私は自分のディレクティブのツールチップを作成していますが、何とか4つすべてが表示されるか、緑のdivでクリックされません。私がここで間違っていることを教えてください。一度に1つずつディレクティブを表示する - AngularJS

ワーキング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>' 
    }; 
})

出典

2016-05-09 Tech Solvr

このディレクティブのすべてのインスタンスを同じスコープにバインドしています。 clickValは常にdata.clickedにバインドされます。これはすべてのディレクティブに供給される同じ値になります。別々の動作が必要な場合は、各インスタンスのプロパティを作成する必要があります – thsorens

あなたが同じスコープにディレクティブのすべての4つのインスタンスを結合しています。このようなものは、あなたのインスタンスごとに別々の状態を作ります。クリックイベントを関数にバインドすると、それをアクティブに設定する前にすべての真偽/ falsysがリセットされます。

ng-click="data.clicked[row] = !data.clicked[row]">

https://plnkr.co/edit/iYAtHmRSHKnpNy1CBRG3?p=preview

出典

2016-05-09 20:16:33 thsorens

私はあなたのコードを試しましたが、動作していません...他のものも開いたままにします - https://plnkr.co/edit/Rk2hMz6gmKPlN3IhKMYE?p = preview –

予期しなかった動作を指定したことは一度もありません。一度に1つの要素しか表示できないようにしたいですか？ – thsorens

はい、私はすでにタイトルでこれを言及 - 'time' –

。

<div class="con-div" ng-repeat="row in fakeDataSet" ng-click="row.clicked = !row.clicked"> 
    <test-div click-val="row.clicked"></test-div> 
</div> 

$scope.fakeDataSet = [{value : 1, clicked : false}, 
{value : 2, clicked : false}, 
{value : 3, clicked : false}, 
{value : 4, clicked : false}];

出典

2016-05-09 20:21:28 dave

これはもう一度クリックしなければ他のツールチップをアクティブに保ちます –

あなたはすべてのツールチップが/一緒に隠す示しているため、先の各要素と同じクリック値をバインドされているように見えます：あなただけにそれを変更する必要が

<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; 
}

出典

2016-05-09 20:22:57 Jitendra

これは、このhttps://plnkr.co/edit/Rk2hMz6gmKPlN3IhKMYE?p=preview –

一度に1つずつディレクティブを表示する - AngularJS

答えて

関連する問題