angularjs - Behavior of controller inside directives

Question

I know that a $scope from a controller can be shared to a link function in directives.

For example, in this code I can call a function from declared controller to print 'Hello World' on browser console:

 .directive('myDirective', [function () {
        return {
            restrict : 'E',
            replace : true,
            controller: 'MyController',
            templateUrl : 'directives/myDirective.tpl.html',
            link : function (scope, elem, attrs, controller) {
                scope.message = 'Hello World!';
            }
        };
    }])

    .controller('MyController', [function ($scope, $element, $attrs, $log, $timeout) {

        // $timeout to wait the link function to be ready.
        $timeout(function () {
            // This prints Hello World as expected.
            $log.debug($scope.message);
         });


        });
    }])

Ok, this works fine.

My questions are:

1. In this approach, it is the SAME scope that will shared between the controller and the directive?
2. What is the consequences to use this approach? Let us assume that I will not manipulate DOM elements in controller, only in link function.
3. I really need to avoid manipulate DOM elements in this controller? Even if the $scope, $elem, etc are the same?

These are questions that I didn't find on Angular Directive documentation.

Here's a plunker with the sample code.

Answer 1

In this approach, it is the SAME scope that will shared between the controller and the directive?

Yes, it is.

What is the consequences to use this approach? Let us assume that I will not manipulate DOM elements in controller, only in link function.

The controller is what provides the directive's behavior, just like with a regular Angular application. That said, you should manipulate the scope inside the controller function only. If you need to change the scope from the link function, call a method of it. Besides, since the controller is executed before the link function, you should initialized the scope in the former so the latter can get a valid model to work on.

I really need to avoid manipulate DOM elements in this controller? Even if the $scope, $elem, etc are the same?

By definition, the link function is the place to perform DOM manipulation. I can't find a technical reason that would prevent you from manipulating the DOM inside the directive's controller except that you shouldn't. In fact, in order to check that I've just changed one directive I've written and moved all the code from the link function to the controller function and everything's kept working. But if you mix both scope logic and DOM manipulation together I think it'll be hard to track down what's going on.

Finally, you may find this article useful: Understanding Directives.