使 $scope.$watch 触发两次的指令？

Question

我有以下 $watch 声明：

$scope.$watch('text', function () {
  $scope.obj = new Obj(text);
  $scope.obj.next();
});

$scope.text是以下输入的ng-model：

<input id="text" type="text" ng-model="text" name="text"/>

这很好用。然而，当我将上面的输入框和其他一些 HTML 抽象成一个指令时，$scope.$watch 块在 $scope.text 发生变化时开始触发两次。这是我抽象出来的指令：

myApp.directive('objDirective', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: myApp.$scope,
      controller: 'objController',
      template: '<form name="textform" id="textform">' +
                '<input id="text" type="text" ng-model="text"' +
                'name="text"/></form>',
      replace: true
    };
});

简而言之：$watch在输入框改变时正常触发一次，但当输入框被放入指令时，它会触发两次。这是为什么？

Answer 1

$watch 在此 Plunker

中不会触发两次

JS

app = angular.module("app", []);

app.directive("test", [ function() {
    return {
        restrict: "E",
        transclude: true,
        template: '<form name="textform" id="textform">' +
                '<input id="text" type="text" ng-model="text"' +
                'name="text"/></form>',
        replace: true,
        scope: app.$scope,
        controller: ["$scope", function($scope) {
          $scope.$watch("text", function(newValue) {
            if (angular.isDefined(newValue)) {
              console.log(newValue);
            }
          });
        }]
    };
}]);

标记

<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <test></test>
  </body>

</html>

Answer 2

已解决：

问题很简单，我在 HTML 和指令中都定义了控制器。

使 $scope.$watch 触发两次的指令？

Directive making $scope.$watch fire twice?

javascript

angularjs

angularjs-directive

angularjs-service

angularjs-scope