在指令/控制器中綁定$作用域

Question

在將作用域綁定到我的指令/控制器後，我不能再使用自己的指令了，是否應該修復？我試圖尋找答案，但沒有到目前爲止..

ANGULARJS：

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

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

的$ scope.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> 

Answer 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"; 
    } 
}