指令上的观察元素答案

【问题标题】：Watch element on directive指令上的观察元素
【发布时间】：2014-08-06 11:52:56
【问题描述】：

我有下一个代码：

angular.module("Test", [])
.directive("testDirective", function () {
  return {
    restrict: "A",
    scope: {
      model: "="
    }
    link: function(scope, element) {
      scope.$watch(function () {
        element.find("#input").val().length
      }, function (nv){
        console.log(nv);
      });
    }
  }
})
.controller("TestController", function($scope) {
  $scope.model = "Test";
  $scope.updateModel = function() {
    $scope.model = Math.random();
  };
})
;


<div ng-controller="TestController">
  <div test-directive model="model">
    <input id="input" type="text" /> <br />
    <input type="button" value="Edit Model" ng-click="updateModel()" />
  </div>
</div>

指令中$watch方法的回调只在按钮被点击时执行。但我想检查那个元素的变化。有什么办法可以做到吗？

编辑 1

如果我这样做了，我会注意到

scope: false

它不会创建一个孤立的范围，所以我可以从指令或控制器双向访问它（这是我想要的）。但是，它也不允许我观看模型...

如果我在控制器上有：

$scope.model.test = 1;
$scope.$watch("model.test", function(v) { log(v); });

并且从指令中的 HTML：

<input type="text" ng-model="model.test" />

然后我修改视图的输入字段，log(v) 永远不会执行...

【问题讨论】：

您是否要查看输入框的值是否有变化？
是的@Darren。那可能吗？是在一个指令内，所以如果我用控制器的正常方式来做它不会工作:(
好的，我已经用 plunker 添加了一个答案，向您展示了几种方法来做您可能想做的事情...

标签： javascript angularjs angularjs-directive angularjs-scope

【解决方案1】：

好的，

所以，我并不完全理解您想要实现的目标，我已经制作了一个简单的应用程序，它有 2 个控制器和一个指令。

指令本身包含一个模板，其中包含用于输入和按钮的 HTML。

它还有一个 2-way bound 属性 myModel，它在模板中都使用，并且也是从 TestController 设置的。

您可以通过在文本框中键入来查看 2-way 绑定 - 它的输入显示在下面的文本中，该文本绑定在控制器上 - 而不是直接到指令。

我还向您展示了如何从您的指令中$broadcast 一个事件并从您页面上可能存在的任何其他控制器/指令等进行监听。单击按钮将增加计数，如第二个控制器上的文本所示TestControllerTwo

希望这将演示您所追求的东西？

你可以在这里看到plunker

【讨论】：

【解决方案2】：

根据您的操作，可能不需要手表。您的代码实际上并没有做任何实际的事情，因此您可能需要一个更完整的示例。

angular.module("Test", [])
.directive("testDirective", function () {
  return {
    restrict: "A",
    scope: {
      model: "="
    }
    link: function(scope, element) {
      document.getElementById('input').onchange=function(){console.log(this.value)}

    }
  }
})
.controller("TestController", function($scope) {
  $scope.model = "Test";
  $scope.updateModel = function() {
    $scope.model = Math.random();
  };
})
;


<div ng-controller="TestController">
  <div test-directive model="model">
    <input id="input" type="text" /> <br />
    <input type="button" value="Edit Model" ng-click="updateModel()" />
  </div>
</div>

【讨论】：

显然 testControlelr 和 testDirective 没有任何实际作用（这就是名称为 test 的原因）。我想使用手表，因为它比这复杂得多。我可以通过<input type="text" ng-keyup="function()" /> 做到这一点，但这也不是我想要使用的方式......感谢您的回答。它有效;)
document.getElementById('input') 在指令中让婴儿耶稣哭泣 :'(

【解决方案3】：

在您的控制器中，您不必使用 $watch，因为它已经是双向数据绑定。如果您想关注输入文本框的元素值，您可以在控制器中执行此操作：

在您的 html 中：

<input ng-change="onModelChange()" ng-model="model" id="input" type="text" />

在你的 JS 中：

angular.module("Test", [])
.controller("TestController", function($scope) {
  $scope.model = "Test";
  $scope.onModelChange = function () {
    console.log($scope.model);
  }
});

plunker：http://plnkr.co/edit/bDxb5JvM0gWg7vMjgaEm?p=preview

【讨论】：