Search code examples
angularjsangular-directive

What is the use of controller in Directives in angularJS


Well i am new to angular and i am trying to figure out all the possible ways to work with the element. After going through some blogs, especially this Learning Directives in angular i came to know that controller can be used to initialize scope, but i am not able to initialize scope inside controller, can anyone help to understand how to initialize scope inside the controller function of the directive.

This is my sample code

 app.directive("simple", function () {
            return {
                restrict: "EA",
                transclude: true,
                template: "<div><button type='button'>{{name}}click me !!!</button></div>",
                link: function (scope, element, attrs) {

                }
                ,
                controller: function ($scope) {
                    $scope.name = 'frog';
                }
            };
        });

Solution

  • The idea is that inside a controller (any controller) you can at any point inject $scope, you do not have to worry about the initialization. That is the main purpose of a controller. and $scope is required in angularJs to perform MVC

    It is good to understand that there is another place where you have access to the $scope as well, but it is not injected but rather created behind the scene and given to you. That place is inside the Link function of a directive. :)

    There is another scope, and that is the $rootScope of the entire application. That particular $scope can also be injected inside services and providers (at run time)