Angularjs 在指令中监视内部元素的值

如何将某个内部元素的值限定为任意变量并观察其变化

//search.html
<div>
   <input type="search" class="input-medium search-query" />
</div>

angular.module('search',[])
   .directive "searchBar", ->
      restrict: "E"
      templateUrl: 'search.html'
      replace: true

//search.html
角度。模块（'搜索'，[]））
.指令“搜索栏”，->
限制：“E”
templateUrl:'search.html'
替换：正确

现在，我想$watch查看输入值的变化（'keyup'）以及从“外部”访问（获取和设置）当前值。我可以拥有一些任意属性并访问它吗，如：

<div>
  <search-bar value='{{searchTerm}}' />
</div>

---

我希望我想做的事情很清楚

您可以在指令链接函数中设置

searchTerm

的值

   link: function(scope, element, attrs) {
        // input element
        var input= angular.element(element.children()[0]);
        input.bind('keyup', function(){
            scope.searchTerm = input.val();
        });
   }

---

Jonathan的回答将在父范围中创建一个“searchTerm”变量。这是不可靠的，因为如果将指令放在另一个作用域（比如表单）中，它将无法在该表单之外访问。您应该在需要的地方创建“searchTerm”，然后将其传递给“searchBar”。如果您没有为“searchBar”使用隔离作用域，那么您甚至不必通过它。如果您确实使用隔离作用域，那么传递看起来是这样的

angular.module('search',[])
   .directive("searchBar", function () {
      restrict: "E"
      scope: {
          searchTermInside: '=searchTerm'
      },
      templateUrl: 'search.html'
      replace: true});

您可以这样使用指令：

<search-bar searchTerm="searchTermOutside" />

和在模板中

//search.html
<div>
   <input type="search" ng-model="searchTermInside" class="input-medium search-query" />
</div>

//search.html

我喜欢这个解决方案，但是在这种情况下，您如何处理

keyup

上的更新？keyup是什么意思？您是否希望跟踪searchTerm中的更改？您只需放置一个

范围。$watch（'searchTermOutside'，function（）…

你在哪里需要它。这只是OP问题的一部分。我只是好奇你在解决方案中会如何处理它。哦，我不知道你不是OP。是的，如果你需要跟踪事件，你的解决方案仍然有效。但你不需要听keyup来获取该模型的更新，angular只是发挥了它的魔力=）同意，魔术是最好的表达方式。指令是我仍然需要思考的问题。我的回答是一个快速而肮脏的解决方案。