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

您的第一個指令可能具有您觀察到的最終范圍內的屬性。

然后，它可以包裝第二個指令。 如果需要的話，你的指令可通信為家長和孩子。