Angular 自定义指令更改属性值答案

【问题标题】：Angular Custom directive change attribute valueAngular 自定义指令更改属性值
【发布时间】：2015-03-06 17:45:48
【问题描述】：

努力寻找监视属性更改的最佳方法，理想情况下，属性更改将基于按键事件进行更新，绑定到父控制器中的范围

我希望指令的每个“实例”都有自己的“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 个指令可以具有等于“真”的值。

我有一个自定义指令

.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);
     });
  }

})

但似乎无法从 $observe 方法中提取值尝试使用 $watch 但仍然没有工作不知道我做错了什么！

【问题讨论】：

您正在使用hasFocus:@，它将真/假值作为字符串。您需要在 HTML 上使用 hasFocus:"=" 和 has-focus="true" 将它们作为对象
感谢 Omri - 太好了 - 工作得很好，是的，与隔离范围选项混淆了！

标签： javascript angularjs angularjs-directive angularjs-scope

【解决方案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 等）

编辑：是的，我刚刚注意到您的模板，所以如果您使用双向绑定 (=)，则不需要手表

【讨论】：