0

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

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

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

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

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

我希望很清楚我想要做什么。

4

2 回答 2

1

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

   link: function(scope, element, attrs) {
        // input element
        var input= angular.element(element.children()[0]);
        input.bind('keyup', function(){
            scope.searchTerm = input.val();
        });
   }
于 2013-05-16T17:48:57.533 回答
0

乔纳森的回答将在父范围内创建一个“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>
于 2013-05-16T18:50:13.827 回答