In my setup, I have an angularJS controller as well as a directive that work together:
angular.module('twitterApp', [])
.controller('AppCtrl', AppCtrl)
.directive('enter', EnterFunc);
function AppCtrl($scope) {
$scope.loadMoreTweets = function() {
alert('loading more tweets!');
}
}
function EnterFunc() {
return function(scope, element, attrs) {
element.bind('click', function() {
scope.loadMoreTweets();
});
}
}
Additionally, there is HTML code structured like this:
<body ng-app="twitterApp">
<div class="container" ng-controller="AppCtrl">
<div enter>
Roll over to load more tweets
</div>
</div>
</body>
The existing setup functions correctly by accessing the controller's scope from a directive. However, I aim to enhance the readability of the code by utilizing the "controller as" syntax in the HTML. When I modify the controller function as follows:
function AppCtrl() {
var vm = this;
vm.loadMoreTweets = function() {
alert('loading more tweets!');
}
}
At this point, the example ceases to function properly. Clicking on the directive results in the following error message:
Uncaught TypeError: scope.loadMoreTweets is not a function
I am seeking guidance on how to rectify this issue and make the directive work without reverting back to binding to $scope. For reference, here is the Plunkr link for both versions - working and "Controller As": http://plnkr.co/edit/PyIA4HVOMLn0KNJ5V2bc?p=info