bind $scope в директивах / контроллере

После привязки области к моей директиве / контроллеру я больше не могу использовать его собственную директиву, есть ли что-то, что я должен исправить? Я пытался найти ответ, но пока ничего..

ANGULARJS: 

return {
        scope: { fullpost:'@' },
        controller: function ($scope, $element) {

            // Edit Btn
            $scope.editbtn = "Edit";

Область видимости$.editbtn больше не отображается в html.

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>
1 2
angularjs scope controllers

1 ответ:

Я бы предложил вам поместить свой внутренний 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>

Директива 

return {
    scope: { fullpost:'@' },
    templateUrl: 'directiveTemplate.html'
    controller: function ($scope, $element) {

        // Edit Btn
        $scope.editbtn = "Edit";
     }
 }
0