Question

我正在尝试在可滚动的AngularJS视图中使用Waypoint，但它无法正常工作。我试图使用ui.utils jQuery Passthrough但没有任何反应。这就是我到目前为止所拥有的：

<body>
<div id="wrapper">

    <div id="nav-menu">
        <...>
    </div>


    <div id="main" class="main">
        <div ng-view></div> 
    </div>
</div>
</body>

我在视图中使用以下模板：

<div class="fullScreenImage"></div>
<div ui-jq="waypoint" ui-options="test">test</div>

我的控制器看起来像这样：

app.controller('myController', ['$scope',
 function ($scope) {
    $scope.test = function(){
       alert('You have scrolled to an entry.');
}}]);

我的主元素是可滚动的，但窗口不是。将passthrough设置为主div将触发测试功能，但我需要在模板内部。有什么建议吗？

Answer 1

提供JSFiddle或plunkr会有所帮助。

但我认为问题是因为模板位于ngView内。

由于模板的内容通过XHR放置在ngView内，因此需要刷新航点，如链接http://imakewebthings.com/jquery-waypoints/#doc-refresh中所述

Angular指令将更有效恕我直言。

Answer 2

我也遇到了嵌套在ng-views中的航点问题。

我的解决方案只是等到视图加载后绑定了航点，为此你可以使用self.width = win_width self.high = win_high self.vecti1 = vel1 self.vecti2 = vel2 def collide_wall(self): bound1 = self.getP1() bound2 = self.getP2() if (bound2.y >= self.width): self.vecti2 = -self.vecti2 self.move(0, -1) if (bound2.x >= self.high): self.vecti1 = -self.vecti1 self.move(-1, 0) if (bound1.x <= 0): self.vecti1 = -self.vecti1 self.move(1, 0) if (bound2.y <= 0): self.vecti2 = -self.vecti2 self.move(0, 1) def ball_collision(self, cir2): radius = self.getRadius() radius2 = cir2.getRadius() bound1 = self.getP1() bound3 = cir2.getP1() center1 = Point(radius + bound1.x,radius + bound1.y) center2 = Point(radius2 + bound3.x,radius2 + bound3.y) centerx = center2.getX() - center1.getX() centery = center2.getY() - center1.getY() distance = sqrt((centerx * centerx) + (centery * centery)) if (distance <= (radius + radius2)): xdistance = abs(center1.getX() - center2.getX()) ydistance = abs(center1.getY() - center2.getY()) if (xdistance <= ydistance): if ((self.vecti2 > 0 & bound1.y < bound3.y) | (self.vecti2 < 0 & bound1.y > bound3.y)): self.vecti2 = -self.vecti2 if ((cir2.vecti2 > 0 & bound3.y < bound1.y) | (cir2.vecti2 < 0 & bound3.y > bound1.y)): cir2.vecti2 = -cir2.vecti2 elif (xdistance > ydistance): if ((self.vecti1 > 0 & bound1.x < bound3.x) | (self.vecti1 < 0 & bound1.x > bound3.x)): self.vecti1 = -self.vecti1 if ((cir2.vecti1 > 0 & bound3.x < bound1.x) | (cir2.vecti1 < 0 & bound3.x > bound1.x)): cir2.vecti1 = -cir2.vecti1。

E.g。

velo1 = 4
velo2 = 3
velo3 = -4
velo4 = -3

cir1 = Ball(win.getWidth(),win.getHeight(),Point(50,50), 20, velo1, velo2)

cir1.setOutline("red")
cir1.setFill("red")
cir1.draw(win)

cir2 = Ball(win.getWidth(),win.getHeight(),Point(200,200), 20, velo3, velo4)
cir2.setOutline("blue")
cir2.setFill("blue")
cir2.draw(win)


while(True):
    cir1.move(cir1.vecti1, cir1.vecti2)
    cir2.move(cir2.vecti1, cir2.vecti2)
    time.sleep(.010)
    cir1.collide_wall()
    cir2.collide_wall()

    cir1.ball_collision(cir2)
    #cir2.ball_collision(cir1)

Answer 3

我遇到了同样的问题。也可以延迟与$timeout例如$timeout(addWaypoints());的绑定。

在AngularJS视图中使用Waypoints.js

3 个答案: