Angular Custom指令更改屬性值

Question

努力尋找觀察屬性變化的最佳方式，理想情況是基於keypress事件更新，綁定到父控制器的范圍

我希望指令的每個'實例'都有自己的'hasFocus'屬性，可以通過更新屬性值來改變它

<menu has-focus="{{ true }}" ></menu>
<menu has-focus="{{ false }}" ></menu>
<menu has-focus="{{ false }}" ></menu>

模板：

<div class="menu">
<ul>
    <li ng-repeat="option in menu.options" ng-class="{ 'focused' : hasFocus  }" tabindex="{{ $index }}">
        <div class="icon">{{ $index+1 }}</div>
    </li>
</ul>

因此，任何時候只有1個指令的值可以等於'true'。

我有一個自定義指令

.directive('menu', function()
{
  restrict : 'E',
  templateUrl : 'partials/menu-left.html',
  replace : true,
  scope : {
        hasFocus : '@'
  },
  link : function( $scope, element, attrs )
  {
    attrs.$observe('hasFocus', function(value) {
        console.log(value);
     });
  }

}) 

但似乎無法從使用$ watch嘗試的$ observe方法中提取值，但仍然無法確定我做錯了什么！

Answer 1

如果你使用@綁定，你可能必須使用這樣的$ watch：

$scope.$watch(function(){
   return attrs.hasFocus;
}, function(val) {
     $scope.hasFocus = val;
});

如果這不起作用，或者你更喜歡雙向綁定= ：

<menu has-focus="true" ></menu>

和

.directive('menu', function()
{
  restrict : 'E',
  templateUrl : 'partials/menu-left.html',
  replace : true,
  scope : {
        hasFocus : '='
  },
  link : function( $scope, element, attrs )
  {
    // $scope.hasFocus holds true/false
  }

}) 

我認為雙向綁定更好，特別是對於布爾值，因為如果你只需要它來控制DOM的外觀，你可能甚至不需要注意改變，你只需要將$ scope.hasFocus插入DOM中某處（ng-show，ng-switch等）

編輯：是的，我剛注意到你的模板，所以如果你使用雙向綁定（ = ）你不需要手表