Question

我有下一个代码：

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)永远不会执行...

Answer 1

根据您的操作，可能不需要手表。你的代码并没有真正做任何实际的事情，所以你可能需要一个更完整的例子。

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>

Answer 2

好的，

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

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

它还有一个双向绑定属性myModel，它在模板中使用，也可以从TestController设置。

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

我还向您展示了如何$broadcast您的指令中的事件，并从您页面上的任何其他控制器/指令等处收听。单击该按钮将增加计数，如第二个控制器TestControllerTwo

上的文本所示

希望这会演示你想要的东西吗？

您可以在此处看到plunker

Answer 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

在指令上观察元素

3 个答案: