Как создать работу с угловым контроллером JS вместе с директивой?

Question

Я учусь Угловой 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(); 
    }); 
}; 
}); 

Я изучаю Угловой код из учебников, но сейчас я пытаюсь писать ООР с множеством функций. Любой совет приветствуется. Благодаря!

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