angular controller can't see function declared in directive

Question

Here is the html:

<div class="col-lg-8" ng-controller="usersCtrl">
<scrollable height="180" ts-attach-spinner class="list-group">
</scrollable>
</div>

Here is the directive:

(function() {
    'use strict';

    angular
        .module('angle')
        .directive('tsAttachSpinner', tsAttachSpinner);

    tsAttachSpinner.$inject = ['$window'];

    function tsAttachSpinner($window) {
        var directive = {
            link: link,
            restrict: 'A'
        };
        return directive;

        function link(scope, element, attrs) {
            function spinnerOff() {
                element.className = element.className + " whirl standard";
            }

            function spinnerOn() {
                element.className = element.className.replace(" whirl standard", "");
            }

            scope.spin = function (promises) {
                return $q.all(promises).then(function (eventArgs) {
                    spinnerOff();
                });
            }
        }
    }

})();

Here is the controller:

(function () {
    'use strict';

    angular
        .module('angle')
        .controller('usersCtrl', usersCtrl);

    usersCtrl.$inject = ['$scope', 'usersSvc'];

    function usersCtrl($scope, usersSvc) {
        $scope.title = 'Users';
        activate();

        function activate() {
            var promises = [getUsers()];
            $scope.spin(promises);
        }

        function getUsers() {
            return usersSvc.getUsers().then(function (data) {
                return $scope.users = data;
            });
        }
    }
})();

As you can see, I declare the spin function and attach it to the scope in the ts-attach-spinner directive. However, I am getting "undefined is not a function", when I call $scope.spin in the controller.

All advice appreciated, thanks in advance.

Assuming that `` is another directive, is that creating a new scope? If so, that's your problem, the function gets defined on a different scope than the one associated w/the controller. Also, I think a controller should probably not call functions defined in directives. I'm sure there are many other approaches, one simple one that comes to mind is for the controller to `$broadcast()` an event and have the directive listen for the event. This will fix the problem at hand w/the benefit of not shooting yourself in the foot down the road. — Sunil D., Feb 23 '15 at 01:00
You want to use an isolate scope '&' and you can add your function as an attribute on the element — Dylan, Feb 23 '15 at 01:05
Here's a good video on it - https://thinkster.io/egghead/isolate-scope-am — Dylan, Feb 23 '15 at 01:08
@SunilD. Thanks. That makes sense. Why would it be shooting myself down the road? — pQuestions123, Feb 23 '15 at 01:09
The reason for my comment is that Angular controller's shouldn't deal w/the DOM (that's what directives are for). While you're not doing that here, it feels similar to that. Some trivial scenarios: 1) You want to use this directive more than once, the last directive that defines the function will be the one that executes, which could cause problems; 2) You want to use this controller or directive somewhere else, but as is they are tightly coupled; 3) A different directive does the same thing and overwrites the function. — Sunil D., Feb 23 '15 at 01:17
PS: I think the approach from @Dylan is a good one. Maybe he can expound on that and post as an answer :) This makes it clear that the directive is expecting to be passed a function. Now you can use this directive w/other controllers and each controller can do something different if they want to. — Sunil D., Feb 23 '15 at 01:19
@Dylan I watched the video. I am still having trouble envisioning the solution using your approach. Would really appreciate you expanding on it. Thanks. — pQuestions123, Feb 23 '15 at 03:05
@pQuestions123 The video doesn't really address the approach you are trying to take (the controller calling a function in the directive). The video addresses the directive calling a method on the controller. Instead, I'd refer you to http://stackoverflow.com/questions/16881478/how-to-call-a-method-defined-in-an-angularjs-directive — Bert, Feb 23 '15 at 03:07
@pQuestions123 You could also create a service that holds the spinner API and reference it from both the directive and the controller. — Bert, Feb 23 '15 at 03:08

angular controller can't see function declared in directive

0 Answers0