After binded a scope to my Directive/Controller I can't use its own directive anymore, is there something I should fix? I've tried to find an answer but nothing so far..
ANGULARJS:
return {
scope: { fullpost:'@' },
controller: function ($scope, $element) {
// Edit Btn
$scope.editbtn = "Edit";
the $scope.editbtn doesn't display in the html anymore.
HTML:
<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>
I'd suggest you to put your inner html of to directive element to move it to some template, though there is option to use ng-transclude
but at looking at your current html you could use you inner content of directive using template & access that template using 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>
Directive
return {
scope: { fullpost:'@' },
templateUrl: 'directiveTemplate.html'
controller: function ($scope, $element) {
// Edit Btn
$scope.editbtn = "Edit";
}
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments