Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/25.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angularjs 角度滚动div on按钮单击_Angularjs_Scroll_Directive_Angularjs Ng Click - Fatal编程技术网

Angularjs 角度滚动div on按钮单击

Angularjs 角度滚动div on按钮单击,angularjs,scroll,directive,angularjs-ng-click,Angularjs,Scroll,Directive,Angularjs Ng Click,我只是在学习角度,有个问题我就是想不出怎么解决 我正在努力实现以下目标 表A/表B/表C 固定高度容器中的内容 当我单击选项卡时,一些内容通过json加载并显示在容器中。因为有很多内容,我得到了一个滚动条 我现在想做的是:存储每个选项卡的滚动顶部位置,这样您就可以在切换选项卡时继续阅读离开的位置 目前,我有一个关于contentdiv的指令,每当div被滚动时就会触发,并将scrollTop位置存储在一个数组中,与当前活动的选项卡相关 app.directive("scrollPositi

我只是在学习角度,有个问题我就是想不出怎么解决

我正在努力实现以下目标


表A/表B/表C

固定高度容器中的内容


当我单击选项卡时,一些内容通过json加载并显示在容器中。因为有很多内容,我得到了一个滚动条

我现在想做的是:存储每个选项卡的滚动顶部位置,这样您就可以在切换选项卡时继续阅读离开的位置

目前,我有一个关于contentdiv的指令,每当div被滚动时就会触发,并将scrollTop位置存储在一个数组中,与当前活动的选项卡相关

app.directive("scrollPosition", function(){
    return{
    restrict: 'A',
    link: function(scope , element){
       element.bind("scroll", function(){
        scope.scrollPosition[scope.tab.categoryIndex]=element.scrollTop();

      });
    }
}
})
到目前为止,这是可行的

但我不知道如何使用这个存储的ScrollTop值在我单击其中一个选项卡时将div设置到该位置

正确的角度是什么

使用ng键单击选项卡,然后滚动div? 在指令中使用类似$watch的东西来查看单击了哪个选项卡

非常感谢您的帮助,因为我只能找到滚动整个文档的示例,这很容易解决。但我只是不知道如何获得选项卡按钮和div之间的这种关系

谢谢
马库斯

调查$anchorScroll。您可以在调用该函数之前对其设置yOffset

$anchorScroll.yOffset = 122; 
$anchorScroll();
$anchorScroll

更新:

所以我解决了这个问题。我的第一个回答太仓促了

以下是plnkr的链接(也嵌入到post中):

滚动第一个选项卡,单击第二个选项卡,然后返回第一个选项卡

我将
pos
变量添加到指令的隔离范围,并从主控制器传入范围变量。这样,指令可以在双向绑定变量上设置滚动位置。下一次单击选项卡时,该指令通过其
scope.pos
变量将其元素上的滚动位置设置为上次滚动到的位置。希望这有帮助

(函数(){
"严格使用",;
var app=angular.module('TabsApp',[])
.controller('TabsCtrl',['$scope',函数($scope){
$scope.tabs=[{
“标题”:“一”,
“url:‘one.tpl.html’,
“位置”:0
}, {
“标题”:“两个”,
“url:‘two.tpl.html’,
“位置”:0
}, {
"标题":"三",,
“url:‘three.tpl.html’,
“位置”:0
}];
$scope.$watch('tabs',函数(val){
console.log(“耶!!!它正在工作!Val=“+Val[0].pos”);
},对);
$scope.currentTab=$scope.tabs[0];
$scope.onClickTab=函数(选项卡){
$scope.currentTab=tab;
};
$scope.isActiveTab=函数(tabUrl){
return tabUrl==$scope.currentTab.url;
};
}]);
应用程序指令(“滚动位置”,函数(){
返回{
限制:“A”,
范围:{
位置:“=”
},
排除:错误,
链接:功能(范围、元素){
元素[0]。onscroll=function(){
scope.pos=元素[0]。滚动顶部;
控制台日志(scope.pos);
作用域:$apply();
};
元素[0]。scrollTop=scope.pos;
}
};
});
})();
ul{
列表样式:无;
填充:0;
保证金:0;
}
李{
浮动:左;
边框:1px实心#000;
边框底宽:0;
保证金:3px 3px 0px 3px;
填充:5px 5px 0px 5px;
背景色:#CCC;
颜色:#6969;
}
#主视图{
边框:1px纯黑;
明确:两者皆有;
填充:0.1em;
}
#视图一、视图二、视图三{
溢出:滚动;
高度:200px;
}
.主动{
背景色:#FFF;
颜色:#000;
}

  • {{tab.title}
{{currentTab.pos}} 视图一 我是马萨,我是布朗迪特·奥迪奥。侵权者的权利。在圣殿和圣殿的圣殿。Donec congue lacinia dui,一种香肠调味品laoreet。努克

我是马萨,我是布朗迪特·奥迪奥。侵权者的权利。在圣殿和圣殿的圣殿。Donec congue lacinia dui,一种香肠调味品laoreet。努克

我是马萨,我是布朗迪特·奥迪奥。侵权者的权利。在圣殿和圣殿的圣殿。Donec congue lacinia dui,一种香肠调味品laoreet。努克

我是马萨,我是布朗迪特·奥迪奥。侵权者的权利。在圣殿和圣殿的圣殿。Donec congue lacinia dui,一种香肠调味品laoreet。努克

我是马萨,我是布朗迪特·奥迪奥。侵权者的权利。在圣殿和圣殿的圣殿。Donec congue lacinia dui,一种香肠调味品laoreet。努克

我是马萨,我是布朗迪特·奥迪奥。侵权者的权利。在圣殿和圣殿的圣殿。Donec congue lacinia dui,一种香肠调味品laoreet。努克

我是马萨,我是布朗迪特·奥迪奥。侵权者的权利。在圣殿和圣殿的圣殿。Donec congue lacinia dui,一种香肠调味品laoreet。努克

我是马萨,我是布朗迪特·奥迪奥。侵权者的权利。在圣殿和圣殿的圣殿。Donec congue lacinia dui,一种香肠调味品laoreet。努克

我是马萨,我是布朗迪特·奥迪奥。侵权者的权利。在圣殿和圣殿的圣殿。Donec congue lacinia dui,一种香肠调味品laoreet。努克

视图二 秃鹫蜥蜴,短舌苔,短舌苔,长舌苔,长舌苔。类aptent taciti socialsqu