Angular custom directive calling another custom directive

Question

I am developing an angular framework where user can configure header, menu, footer and selected pages using custom directives. To complete this requirement, at one point I need the following. I have seen example on the net, but does not really explain it well.

The requirement is that the templateUrl of the first custom directive shall be replaced with a template attribute that should call another custom directive.

The following code with templateUrl works fine.

angular.module("app",[]);
angular.module("app").controller("productController", ['$scope', function ($scope) {


}]);

angular.module("app").directive("tmHtml", function () {
    return {
        transclude: false,
        scope: {
        },
        controller: "productController",
        templateUrl: "/templates/HideShow.html"
    };
});

However, when I change the above code as follows. I am making the change so that my custom directive tmHtml calls another custom directive.

 angular.module("app").directive("tmHtml", function () {
        return {
            transclude: false,
            scope: {
            },
            controller: "productController",
         template: ``<hideShow></hideShow>``
        };
    });

New Directive for hideShow is written as follows

angular.module("app").directive("hideShow", function () {

    return {
        tempateUrl: "/templates/HideShow.html"
    };

});

It's not working. I understand I am missing something here. I could not find out. Appreciate help

Answer 1

Try define your controller with controllerAs:

angular.module("app").directive("tmHtml", function () {
    return {
        transclude: false,
        scope: {
        },
        controllerAs: "productController",
        templateUrl: "/templates/HideShow.html"
    };
});

Answer 2

 angular.module("app").directive("tmHtml", function () {
        return {
            transclude: false,
            scope: {
            },
            controller: "productController",
         template: ``<hideShow></hideShow>``
        };
    });

must be replaced by

 angular.module("app").directive("tmHtml", function () {
        return {
            transclude: false,
            scope: {
            },
            controller: "productController",
         template: "<hide-show></hide-show>"
        };
    });

under the attribute template , you add Html. So, you still have to use snake-case there, like in your Html files

Answer 3

Working code:

var app = angular.module('plunker', []);

app.controller('productController', function($scope) {

});

app.directive("hideShow", function() {

  return {
    templateUrl: "hideshow.html"
  };

});


app.directive("tmHtml", function() {
  return {
    transclude: false,
    scope: {},
    controller: "productController",
    template: "<hide-show></hide-show>"
  };
});

the problem is with the spelling of templateUrl in your hideShow directive.

Demo : http://plnkr.co/edit/TaznOeNQ7dM9lyFgqwCL?p=preview

Answer 4

Your first directive may have an eventually scoped attribute that you observe .

Then it may wrap the second directive. If needed, your directives may communicates as parents and children.