2016-06-23 66 views
1

我有一个文本输入字段,其占位符我想每隔几秒更改一次。但是我不想用这个污染我的控制器,所以我想把这个功能封装到指令中。通过AngularJS指令更改占位符?

这就是我的指令看起来像:

myApp.directive('searchBox', ['$interval', function($interval) { 
    return { 
     restrict: 'A', 
     link(scope, element, attrs) { 
      $interval(function() { 
       attrs.placeholder = 'New'; 
      }, 1000); 
     } 
    } 
}]) 

和HTML:

<input type="text" class="form-control" placeholder="Old" ng-model="search" search-box> 

然而占位顽固不改变,即使在控制台attrs.placeholder可以看出,变化从'你好''测试'。有任何想法吗?

PLUNKR: https://plnkr.co/edit/Oy1M8FPTXxzB9oYMJqlx?p=preview

回答

2

不能更改通过attr对象属性值(它只是你的元素的静态反射属性)。相反,请使用element.attr('placeholder', 'Test')attrs.$set('placeholder', 'Test')更新您的元素。

+1

愿你和你的孩子永远得到永生。 – Aron

+0

这两种方法有什么区别? – Aron

+0

亲眼看看:https://github.com/angular/angular.js/blob/b94626cb9bc03a067feb7c6f0302f811edfd8e67/src/ng/compile.js#L1537 基本上,'attrs。$ set'可以让你在你的值中使用插值(例如'attrs。$ set('placeholder','Test {{myVar}}')',属性键是“标准化”à-la-Angular,意思是更新'data-foo'属性使用'dataFoo'作为键 'element.attr'只是一个常规的DOM属性更新 – Iso