Question

134

Dynamically adding Angular directives

rated 0 times [ 135] [ 1] / answers: 1 / hits: 18321 / 11 Years ago, mon, december 9, 2013, 12:00:00

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/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kennedi

Add To Favorites

Follow

Total Points: 702

Total Questions: 109

Total Answers: 111

Location: Vietnam

Member since Sun, Oct 18, 2020

4 Years ago

answered 11 Years ago nestorjarettg · Accepted Answer

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?');

            }

        };

});