Question

如何将一些内部元素的值作用于任意变量并观察其变化？

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

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

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

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

我希望我很清楚我正在做什么。

Answer 1

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

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

Answer 2

Jonathan的回答将创建一个＆＃34; searchTerm＆＃34;父范围中的变量。这是不可靠的，因为如果你将你的指令放在另一个范围（例如一个表单）中，那么它将无法在该表单之外访问。你应该做的是创建＆＃34; searchTerm＆＃34;在哪里需要它，然后将其传递给＆＃34; searchBar＆＃34;。如果您没有使用隔离范围＆＃34; searchBar＆＃34;然后你甚至不必通过它。如果你确实使用了隔离范围，那么传递会看起来像这样。

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>

在指令中观察内部元素的值

2 个答案: