[英]Don't work directive in angular
I am only start study angular and want understand why my code doesn't work. 我只是开始学习角度知识,想了解为什么我的代码不起作用。 Code:
码:
var app = angular.module('app', ['appModule']).config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[').endSymbol(']]');});
var appModule = angular.module('appModule', []);
appModule.directive('name', function(){
return{
restrict : 'E',
scope : {},
//transclude : true, // it has HTML content
link : function(scope, element, attrs, controllers){
scope.fullName = attrs.first + " " + attrs.second
},
tempalte : '<h1>[[ fullName ]]</h1>'
}
});
In my html 在我的HTML中
<name data-first="Jack" data-second="Nollan"></name>
<name data-first="Chris" data-second="John"></name>
I include angular and my scripts. 我包括角度和我的脚本。 Angular work, i test.
有角的工作,我测试。 My code in result print nothing ( Can anybody help me?
结果中的我的代码什么也没打印(有人可以帮我吗?
PS If you can explain what do this transclude : true,
i will be very grateful. PS:如果您能解释一下这是什么意思
transclude : true,
好的transclude : true,
我将不胜感激。
Firstly, template is spelt incorrectly in the directive and secondly, in the HTML you need to use {{ fullName }}
instead of [[ fullName ]]
首先,指令中的模板拼写错误,其次,在HTML中,您需要使用
{{ fullName }}
而不是[[ fullName ]]
Your directive should be: 您的指令应为:
var appModule = angular.module('appModule', []);
appModule.directive('name', function(){
return {
restrict : 'E',
scope : {},
//transclude : true, // it has HTML content
link : function(scope, element, attrs, controllers){
scope.fullName = attrs.first + " " + attrs.second
},
template : '<h1>{{ fullName }}</h1>'
}
});
Transclude: Using transclude allows you to inject HTML into your directive. Transclude:使用transclude允许您将HTML注入指令中。 In the directive itself you can place the
ng-transclude
directive and Angular will replace this with the HTML you want to inject. 在指令本身中,您可以放置
ng-transclude
指令,Angular会将其替换为您要注入的HTML。
In your example if you wanted to display the text 'says hello' after the name of the person you could change your directive to this: 在您的示例中,如果您想在人员名称后显示文本“ says hello”,则可以将指令更改为此:
var appModule = angular.module('appModule', []);
appModule.directive('name', function(){
return{
restrict : 'E',
scope : {},
transclude : true, // it has HTML content
link : function(scope, element, attrs, controllers){
scope.fullName = attrs.first + " " + attrs.second
},
template : '<h1>{{ fullName }} <ng-transclude></ng-transclude></h1>'
}
});
In your HTML you can then enter the text in the <name />
element like so: 然后,您可以在HTML中的
<name />
元素中输入文本,如下所示:
<name first="Jack" second="Nollan"> says Hello</name>
Angular will then insert the text 'says Hello' wherever you have placed the ng-transclude
directive in your directive template. 然后,只要将
ng-transclude
指令放在指令模板中的任何位置,Angular都会插入文本“ says Hello”。 Here is a plnkr showing this. 这是显示此内容的plnkr 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.