Angular Custom指令更改属性值

时间:2015-01-08 14:59:36

标签: javascript angularjs angularjs-directive angularjs-scope

努力寻找观察属性变化的最佳方式,理想情况是基于keypress事件更新,绑定到父控制器中的范围

我希望每个'实例'指令有自己的' hasFocus'通过更新属性值来更改属性 e.g。

<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个指令可以使值等于&#39; true&#39;在任何时候。

我有自定义指令

.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但仍然没有工作 不确定我做错了什么!

1 个答案:

答案 0 :(得分:2)

如果您使用@绑定,则可能必须使用$ 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等)

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