Angularjs 在指令/控制器中绑定$scope
将作用域绑定到我的指令/控制器后,我不能再使用它自己的指令了,有什么需要修复的吗?我试图找到答案,但到目前为止一无所获 ANGULARJS:Angularjs 在指令/控制器中绑定$scope,angularjs,scope,controllers,Angularjs,Scope,Controllers,将作用域绑定到我的指令/控制器后,我不能再使用它自己的指令了,有什么需要修复的吗?我试图找到答案,但到目前为止一无所获 ANGULARJS: return { scope: { fullpost:'@' }, controller: function ($scope, $element) { // Edit Btn $scope.editbtn = "Edit"; <full-post fullpost="
return {
scope: { fullpost:'@' },
controller: function ($scope, $element) {
// Edit Btn
$scope.editbtn = "Edit";
<full-post fullpost="fullpost">
<!-- edit tools -->
<div class='yardtools'>
<button id='edit' ng-click='edit()'><i class='fa fa-pencil-square-o'></i> {{ editbtn }}</button>
<button id='update' class='hidden'><i class='fa fa-wrench'></i> Update</button>
<button id='delete'ng-click='delete()'class='hidden'><i class='fa fa-trash-o'></i> Delete</button>
</div>
<!-- post -->
<div class='yardman-post' data-post-id=" + id + ">
<div ym='info'>
<p>Post id: <em> {{ fullpost.id }}</em>, Posted on: <em>{{ fullpost.date }}</em>, by <em>AUTHOR</em>
</p>
</div>
<div ym='title' contenteditable='false'>{{ fullpost.title }}</div>
<div ym='body' contenteditable='false'>{{ fullpost.text }}</div>
</div>
</full-post>
$scope.editbtn不再显示在html中
HTML:
return {
scope: { fullpost:'@' },
controller: function ($scope, $element) {
// Edit Btn
$scope.editbtn = "Edit";
<full-post fullpost="fullpost">
<!-- edit tools -->
<div class='yardtools'>
<button id='edit' ng-click='edit()'><i class='fa fa-pencil-square-o'></i> {{ editbtn }}</button>
<button id='update' class='hidden'><i class='fa fa-wrench'></i> Update</button>
<button id='delete'ng-click='delete()'class='hidden'><i class='fa fa-trash-o'></i> Delete</button>
</div>
<!-- post -->
<div class='yardman-post' data-post-id=" + id + ">
<div ym='info'>
<p>Post id: <em> {{ fullpost.id }}</em>, Posted on: <em>{{ fullpost.date }}</em>, by <em>AUTHOR</em>
</p>
</div>
<div ym='title' contenteditable='false'>{{ fullpost.title }}</div>
<div ym='body' contenteditable='false'>{{ fullpost.text }}</div>
</div>
</full-post>
{{editbtn}}
更新
删除
帖子id:{fullpost.id},作者发布于:{{fullpost.date}
{{fullpost.title}
{{fullpost.text}
我建议您将指令元素的内部html放到某个模板中,尽管可以选择使用ng transclude
,但查看当前html时,您可以使用模板使用指令的内部内容,并使用templateUrl
访问该模板
directiveTemplate.html
<div class='yardtools'>
<button id='edit' ng-click='edit()'><i class='fa fa-pencil-square-o'></i> {{ editbtn }}</button>
<button id='update' class='hidden'><i class='fa fa-wrench'></i> Update</button>
<button id='delete'ng-click='delete()'class='hidden'><i class='fa fa-trash-o'></i> Delete</button>
</div>
<!-- post -->
<div class='yardman-post' data-post-id=" + id + ">
<div ym='info'>
<p>Post id: <em> {{ fullpost.id }}</em>, Posted on: <em>{{ fullpost.date }}</em>, by <em>AUTHOR</em>
</p>
</div>
<div ym='title' contenteditable='false'>{{ fullpost.title }}</div>
<div ym='body' contenteditable='false'>{{ fullpost.text }}</div>
</div>
你能用html添加更多的代码吗?@pankajparkar,我添加了html。你是说你想从指令中更改按钮文本吗?@pankajparkar是的,如果我不定义作用域:{fullpost:'@',你的
fullpost
指令有一个隔离作用域(即父范围或子范围内的指令/表达式不可见)。如果
下的所有HTML都应该是指令的一部分,那么将其作为指令的模板。您也可以排除它,但如果不了解指令的责任范围,我无法说明正确的方法是什么