Dynamically adding Angular directives

Question

I'm fairly new to angular JS and am finding it a steep learning curve, I get the feeling im really missing the point here but here goes:

I want to add a directive to my page from a controller. So I thought if I add the directive tag to the page, the directive and associated controller/template etc get added with it. After reading about the $compile method, I thought this would then be used to bind this directive to its newly created tag. This part is commented out below, but with or without this, I need the word login to appear and its controller to control it?

I can find lots of examples of similar around the web when the directive tag is on the page at load time, and can get those to work fine, so this is whats making think it is related to the $compile method - what am I missing?

HTML:

<div ng-app="application" ng-controller="myController"></div>

JS:

var myApp = angular.module('application', []);

myApp.controller('myController', ['$scope', function($scope) {

        function showLoginDirective () {
            $scope.login = angular.element(document.createElement('login'));

            angular.element(document.body).append($scope.login);
        };

        showLoginDirective();
    }
]);

angular.module('directives', [])
    .directive('login', function($compile) {
        return {
            restrict: 'E',
            controller: 'LoginController',
            template: '<div>login</div>',
            link: function(scope, element, attrs) {
                //$compile(element.contents())(scope.$new);
                console.log('should I not have a div containing login controlled by loginController at this point?');
            }
        };
});

the above code is also here: http://jsfiddle.net/d5n6L/7/

Answer 1

You shouldn't really be dynamically adding elements to the page with Angular. Many people, myself included, who come from a jQuery background, assume that we can continue with this practice and just add things to the page as we need them.

However, with Angular, the logic should really all be visible in the markup. What does that mean? In your case, you should have the directive there no matter what, and then control its visibility with ng-show or ng-hide or ng-class.

So, something like this would be best:

<login ng-show="showLogin"></login>

And then you can use your directive as you programmed.

Note that you can also define an inline controller (assign an array of dependencies and a function of those dependencies as the controller property of your directive). That keeps all related code in the same place.

E.g.,

angular.module('directives', [])
    .directive('login', function($compile) {
        return {
            restrict: 'E',
            controller: ['$scope', function($scope) {

                function showLoginDirective () {
                    $scope.showLogin = true;

                };

                 showLoginDirective();
              }
            ],
            template: '<div>login</div>',
            link: function(scope, element, attrs) {
                //$compile(element.contents())(scope.$new);
                console.log('should i not have a div containing login controlled by loginController at this point?');
            }
        };
});

Answer 2

Rather than compiling dynamically from within your controller I suggest you use ng-if to declaratively express which DOM elements should exist on the DOM.

HTML

<div ng-app="application" ng-controller="myController">
    <div ng-if="showLogin" login></div>
</div>

JS

var myApp = angular.module('application', []);

myApp.controller('myController', ['$scope', function($scope) {

        function showLoginDirective () {
            $scope.showLogin = true;
        };

        showLoginDirective();
    }
]);

angular.module('directives', [])
    .directive('login', function($compile) {
        return {
            restrict: 'E',
            controller: 'LoginController',
            template: '<div>login</div>',
            link: function(scope, element, attrs) {
                //$compile(element.contents())(scope.$new);
                console.log('should i not have a div containing login controlled by loginController at this point?');
            }
        };
});