angularjs transclude不在我的自定义指令中工作

有人能看看我的简单指令，找出为什么transclude不起作用吗

<div ng-app="app">
<div ng-controller="MainController">
    <p>Your name</p><input ng-model="name"></input><button ng-click="greeting()">click</button>
    <greeter nationality="English" name="{{name}}">Hahahahah</greeter>
    <greeter nationality="French" name="{{name}}">Hahahahah</greeter>
    <greeter nationality="Russian" name="{{name}}">Hahahahah</greeter>
</div>    
</div>

html:

<div ng-app="app">
<div ng-controller="MainController">
    <p>Your name</p><input ng-model="name"></input><button ng-click="greeting()">click</button>
    <greeter nationality="English" name="{{name}}">Hahahahah</greeter>
    <greeter nationality="French" name="{{name}}">Hahahahah</greeter>
    <greeter nationality="Russian" name="{{name}}">Hahahahah</greeter>
</div>    
</div>

您的姓名
单击
<div ng-app="app">
<div ng-controller="MainController">
    <p>Your name</p><input ng-model="name"></input><button ng-click="greeting()">click</button>
    <greeter nationality="English" name="{{name}}">Hahahahah</greeter>
    <greeter nationality="French" name="{{name}}">Hahahahah</greeter>
    <greeter nationality="Russian" name="{{name}}">Hahahahah</greeter>
</div>    
</div>

哈哈哈
哈哈哈
哈哈哈

js:

<div ng-app="app">
<div ng-controller="MainController">
    <p>Your name</p><input ng-model="name"></input><button ng-click="greeting()">click</button>
    <greeter nationality="English" name="{{name}}">Hahahahah</greeter>
    <greeter nationality="French" name="{{name}}">Hahahahah</greeter>
    <greeter nationality="Russian" name="{{name}}">Hahahahah</greeter>
</div>    
</div>

var-app=angular.module（“app”，[]）；
应用控制器（“主控制器”，功能（$scope）{
});
应用指令（“迎宾员”，函数（）{
返回{
限制：“AE”，
范围：{
名称：“@”，
国籍：“@”
},
是的，
模板：“{name}}”，
链接：函数（作用域、元素、属性、ctrl）{
作用域：$watch（“名称”，函数（）{
elem.html（问候语+“”+scope.name）；
});
var=”；
如果（scope.national==“英语”）{
问候语=“你好”；
}
else if（scope.national==“法语”）{
问候语=“你好”；
}
否则{
问候语=“你好”；
}
}
};
});

使用

elem.html（…）

插入问候语文本时，您正在覆盖转写的内容

<div ng-app="app">
<div ng-controller="MainController">
    <p>Your name</p><input ng-model="name"></input><button ng-click="greeting()">click</button>
    <greeter nationality="English" name="{{name}}">Hahahahah</greeter>
    <greeter nationality="French" name="{{name}}">Hahahahah</greeter>
    <greeter nationality="Russian" name="{{name}}">Hahahahah</greeter>
</div>    
</div>

您可以直接在模板中包含问候语文本，而不是使用jqLite操作DOM。要使其正常工作，

greeting

必须是作用域属性（

scope.greeting

，而不是

var greeting

）

<div ng-app="app">
<div ng-controller="MainController">
    <p>Your name</p><input ng-model="name"></input><button ng-click="greeting()">click</button>
    <greeter nationality="English" name="{{name}}">Hahahahah</greeter>
    <greeter nationality="French" name="{{name}}">Hahahahah</greeter>
    <greeter nationality="Russian" name="{{name}}">Hahahahah</greeter>
</div>    
</div>

模板：“{{greeting}{{name}}”，
链接：功能（范围、要素、属性）{
如果（scope.national==“英语”）{
scope.greeting=“你好”；
}else if（scope.national==“法语”）{
scope.greeting=“你好”；
}否则{
scope.greeting=“你好”；
}
}

如果您想自己尝试代码

<div ng-app="app">
<div ng-controller="MainController">
    <p>Your name</p><input ng-model="name"></input><button ng-click="greeting()">click</button>
    <greeter nationality="English" name="{{name}}">Hahahahah</greeter>
    <greeter nationality="French" name="{{name}}">Hahahahah</greeter>
    <greeter nationality="Russian" name="{{name}}">Hahahahah</greeter>
</div>    
</div>