[英]Angular Directive mouseenter/mouseleave working but not setting to initial state after mouseleave
I have a directive that shows a list of student information on a template and on mouseenter it then shows additional student information. 我有一个指令,显示模板上的学生信息列表,然后在mouseenter上显示其他学生信息。 I want to be able to go back to the initial state on mouseleave. 我希望能够回到mouseleave的初始状态。
Tried all the resources and not much luck. 尝试了所有的资源而没有太多的运气。
html - this is where i'm injecting my directive html - 这是我注入我的指令的地方
<div ng-repeat="student in studentPortfolio">
<portfolio-view student="student"></portfolio-view>
</div>
html directive template 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>
directive 指示
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
});
}
}
});
I didn't have your data, but the ng-show
thing works, like in this fiddle . 我没有你的数据,但ng-show
东西很有用,比如这个小提琴 。
Here's a simpler variant. 这是一个更简单的变体。 If your template includes the parts you wish to show or hide, with an ng-show variable on it, your directive could be fairly simple: 如果您的模板包含您希望显示或隐藏的部分,并且上面有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.