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

How do I make an Angular JS controller work alongside a directive?

本文关键字：指令 一起 工作 控制器 何使 Angular JS      更新时间：2023-09-26

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

  • 控制器：基本的显示/隐藏切换
  • 指令：滚动时显示的"返回顶部链接"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代码，但现在我正试图编写具有多个功能的SPAs。欢迎提出任何建议。谢谢

Codepen版本：

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

您忘记使用ng-controller="personCtrl":将控制器绑定到应用程序

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

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

您可以返回一个对象，而不是指令工厂上的链接函数。此对象的属性之一是控制器。可以将指令的控制器指定为字符串（控制器名称）或函数。模板中有一个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

相关文章：