javascript - 如何使 Angular JS Controller 与指令一起工作？

Question

我正在学习 Angular JS。我已经编写了(好的，找到并重用了)两个基本函数:

• Controller :基本的显示/隐藏切换
• 指令:滚动时出现的“返回顶部链接”100 像素

这两个片段都是单独工作的。由于某种原因，当我尝试将它们组合成一个名为“scrollApp”的模块时，其中一个停止工作。

html:

<div ng-app="scrollApp" scroll id="page" ng-class="{min:boolChangeClass}">

<div class="static-button"><a href="#"> Back to top</a></div>

<button ng-click="toggle()">Toggle</button>
<p ng-show="myVar">
this is the content to hide
</p>
</div>

JS:

app.directive("scroll", function ($window) {
return function(scope, element, attrs) {
    angular.element($window).bind("scroll", function() {
         if (this.pageYOffset >= 100) {
             scope.boolChangeClass = true;
         } else {
             scope.boolChangeClass = false;
         }
        scope.$apply();
    });
};
});

我一直在从教程中学习 Angular 代码，但现在我正在尝试编写具有多种功能的 SPA。任何的建议都受欢迎。谢谢!

Codepen 版本:

http://codepen.io/angeltapes/pen/embGJw/

Answer 1

您忘记使用 ng-controller="personCtrl" 将 Controller 绑定(bind)到您的应用:

<div ng-controller="personCtrl" ng-app="scrollApp" scroll id="page" ng-class="{min:boolChangeClass}" >

更新的代码笔:http://codepen.io/anon/pen/LEMzdW