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"将控制器绑定到您的应用：

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

更新了codepen：http://codepen.io/anon/pen/LEMzdW

Answer 2

您可以在指令工厂上返回对象而不是链接函数。该对象的一个属性是控制器。您可以将指令的控制器指定为字符串（控制器名称）或函数。您可以使用controllerAs属性访问模板内的控制器。

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

http://codepen.io/Raulucco/pen/RNELeM?editors=101

如何使Angular JS控制器与指令一起工作？

2 个答案: