[英]Angular Directive mouseenter/mouseleave working but not setting to initial state after mouseleave
我有一個指令,顯示模板上的學生信息列表,然后在mouseenter上顯示其他學生信息。 我希望能夠回到mouseleave的初始狀態。
嘗試了所有的資源而沒有太多的運氣。
html - 這是我注入我的指令的地方
<div ng-repeat="student in studentPortfolio">
<portfolio-view student="student"></portfolio-view>
</div>
html指令模板
<div class="outer-box">
<img src="{{student.picture}}" alt="{{student.name.first}} {{student.name.last}}" style="width: 200px; height: 200px">
Name: {{student.name.first}} {{student.name.last}}
<br>Bio: {{student.Bio}}
<br>
Skills:
<div ng-repeat="skill in student.skills">
{{skill.title}}
</div>
<br>
</div>
指示
app.directive('portfolioView', function() {
return {
restrict: 'E',
scope: {
student: "="
},
templateUrl: '/html-templates/hoverPortfolio.html',
link: function(scope, elem, attrs) {
//gets the first project and shows it
var project = scope.student.projects;
var firstProject = project[0];
var fp_name = firstProject.name;
var fp_type = firstProject.projectType;
var fp_description = firstProject.description;
//gets the second project and shows it
var secondProject = project[1];
var sp_name = secondProject.name;
var sp_type = secondProject.projectType;
var sp_description = secondProject.description;
//the template that shows the second project
var newHtml =
'<div class="projects outer-box"><div class="firstproject"> Project Name: ' +
fp_name + '<br>Type: ' + fp_type + '<br>Description: ' +
fp_description +
'</div><br><div class="secondproject"> Project Name: ' +
sp_name + '<br>Type: ' + sp_type + '<br>Description: ' +
sp_description +
'</div> </div>';
elem.on('mouseenter', function() {
elem.html(
newHtml
)
});
elem.on('mouseleave', function() {
//return to intial state
});
}
}
});
我沒有你的數據,但ng-show
東西很有用,比如這個小提琴 。
這是一個更簡單的變體。 如果您的模板包含您希望顯示或隱藏的部分,並且上面有ng-show變量,那么您的指令可能非常簡單:
return {
restrict: 'EAC',
replace: true,
template: '<div><div ng-show="show">show</div><div ng-show="!show">hide</div></div>',
link: function (scope, element, attrs, controller) {
scope.show = true;
element.on('mouseenter', function () {
scope.$apply(function () {
scope.show = false;
});
});
element.on('mouseleave', function () {
scope.$apply(function () {
scope.show = true;
});
});
}
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.