Question

我正在开发一个角度框架，用户可以使用自定义指令配置页眉，菜单，页脚和所选页面。要完成此要求，我需要以下内容。我在网上看到了一些例子，但并没有真正解释清楚。

要求是第一个自定义指令的templateUrl应替换为应调用另一个自定义指令的模板属性。

以下使用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。所以，你仍然需要在那里使用snake-case，就像你的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>"
  };
});

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

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

Answer 4

您的第一个指令可能具有eventually scoped的observe属性。

然后它可以包装第二个指令。如果需要，您的指令可以communicates作为父母和孩子。

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

4 个答案: