Angular自定义指令调用另一个自定义指令

Question

我正在开发一个角度框架，用户可以使用自定义指令配置页眉，菜单，页脚和所选页面。 为了完成这一要求，我需要以下几点。 我在网上看到了示例，但并不能很好地解释它。

要求是，第一个定制指令的templateUrl必须替换为应该调用另一个定制指令的template属性。

以下带有templateUrl的代码可以正常工作。

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"
    };
});

但是，当我如下更改上面的代码时。 我正在进行更改，以便我的自定义指令tmHtml调用另一个自定义指令。

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

hideShow的新指令编写如下

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

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

});

没用 我了解我在这里缺少什么。 我找不到。 感谢帮助

Answer 1

尝试使用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>``
        };
    });

必须替换为

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

在属性template ，添加Html。 因此，您仍然必须在其中使用蛇形保护套，例如在您的HTML文件中

Answer 3

工作代码：

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>"
  };
});

问题出在hideShow指令中templateUrl的拼写。

演示： http : //plnkr.co/edit/TaznOeNQ7dM9lyFgqwCL?p=preview

Answer 4

您的第一个指令可能具有您观察到的最终范围内的属性。

然后，它可以包装第二个指令。 如果需要的话，你的指令可通信为家长和孩子。