javascript - 为什么scope.$watch不起作用？

Question

我有带有模板的 angularjs 指令，该指令由两个标签组成 - 输入和空列表。我想要的是观察第一个输入标签的输入值。 $watch() 方法在指令初始化时被调用一次，仅此而已。输入值的任何变化都是无声的。我错过了什么？

这是我的plunk

这是代码:

.directive('drpdwn', function(){
   var ref = new Firebase("https://sagavera.firebaseio.com/countries");

function link(scope, element, attrs){

  function watched(){
    element[0].firstChild.value = 'bumba'; //this gets called once
    return element[0].firstChild.value;
  }

  scope.$watch(watched, function(val){
    console.log("watched", val)
  }, true);

}
return {
  scope:{
    searchString: '='
  },
  link: link,
  templateUrl:'drpdwn.html'
}
})

编辑:

如果我在链接函数中调用$interval()，它会按预期工作。这是故意行为吗？

Answer 1

它不会被调用，因为作用域上永远不会触发摘要。

使用 ng-model 试试这个:

http://plnkr.co/edit/qMP5NDEMYjXfYsoJtneL?p=preview

function link(scope, element, attrs){
  scope.searchString = 'bumba';
  scope.$watch('searchString', function(val){
    console.log("watched", val)
    val = val.toLowerCase();
    val = val.replace(/ */g,'');
    var regex = /^[a-z]*$/g;
    if (regex.test(val)) {
      scope.searchString = val;
      // TODO something....
    }
  }, true);

模板:

<input class="form-control"  ng-model="searchString" id="focusedInput"  type="text" placeholder="something" />
<div></div>