[英]Angular custom directive calling another custom directive
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. 要求是,第一个定制指令的templateUrl必须替换为应该调用另一个定制指令的template属性。
The following code with templateUrl works fine. 以下带有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"
};
});
However, when I change the above code as follows. 但是,当我如下更改上面的代码时。 I am making the change so that my custom directive tmHtml calls another custom directive.
我正在进行更改,以便我的自定义指令tmHtml调用另一个自定义指令。
angular.module("app").directive("tmHtml", function () {
return {
transclude: false,
scope: {
},
controller: "productController",
template: ``<hideShow></hideShow>``
};
});
New Directive for hideShow is written as follows hideShow的新指令编写如下
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
感谢帮助
Try define your controller with controllerAs: 尝试使用controllerAs定义控制器:
angular.module("app").directive("tmHtml", function () {
return {
transclude: false,
scope: {
},
controllerAs: "productController",
templateUrl: "/templates/HideShow.html"
};
});
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. 在属性
template
,添加Html。 So, you still have to use snake-case there, like in your Html files 因此,您仍然必须在其中使用蛇形保护套,例如在您的HTML文件中
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. 问题出在
hideShow
指令中templateUrl
的拼写。
Demo : http://plnkr.co/edit/TaznOeNQ7dM9lyFgqwCL?p=preview 演示: http : //plnkr.co/edit/TaznOeNQ7dM9lyFgqwCL?p=preview
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.
如果需要的话,你的指令可通信为家长和孩子。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.