Question

我正在尝试监听/监视控制器中的变量变为指令，对于指令监视中的链接起作用，但我正在尝试使用在编译时完成工作的API（指令生命周期）。所以，我正在寻找任何解决方法，以便我可以在编译级别观察变量。

*{
visibility:hidden;}

* > img
{
visibility:visible !important;
}

下面是一个可以工作的链接的代码，下面是我希望可以工作但不能工作的代码（似乎在编译$ watch时无法应用。）

Html代码：

Note: I am using angular-1.4.

工作代码：

<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <counter model2="count1"></counter>

  </div>
</div>

以下是我希望应该运行的代码（即在编译级别使用watch）：

var app = angular.module('myApp', [])

app.directive('counter',
  function($timeout) {
    return {
      restrict: 'EAC',
      template: `<div>Directive Counter: {{internalCount}}</div>`,
      scope: {
        internalCount: '=model2'
      },

      link: function($scope, element) {
        function addCount() {
          $timeout(function() {
            $scope.internalCount += 1;

            addCount();
          }, 1000)

        }
        $scope.$watch('internalCount', function() {
          console.log("hrruy!!!");
          console.log($scope.internalCount);
        });
        addCount();

      }
    };
  }
)

app.controller('myCtrl', function($scope) {
  $scope.count1 = 10;
});

按照Anoop和Hitman的建议更正编辑上面的代码，以及确切的问题要求：

var app = angular.module('myApp', [])

app.directive('counter',
  function($timeout) {
    return {
      restrict: 'EAC',
      template: `<div>Directive Counter: {{internalCount}}</div>`,
      scope: {
        internalCount: '=model2'
      },
            link:function(){
      console.log("linker callled...");
      },
      compile: function($scope, element) {
      return function (scope, element, attrs) {
        function addCount() {
          $timeout(function() {
            $scope.internalCount += 1;

            addCount();
          }, 1000)

        }
        scope.$watch('internalCount', function() {
          console.log("hrruy!!!");
          console.log($scope.internalCount);
        });
        addCount();
                }
      }
    };
  }
)

app.controller('myCtrl', function($scope) {
  $scope.count1 = 10;
});

注意：根据此处的问题陈述，最后一个代码使用＆＃34; $ scope.count1＆＃34; 来自控制器的变量和指令编译函数中的监听/监视（默认的后链接完成）。

但是如果说＆＃34; $ scope.count1＆＃34;仍然会出现问题。是一个复杂的嵌套JSON映射/对象。在那种情况下，指令不会检测count1更改。所以如果控制器变量是一个复杂的对象，如何在指令编译函数中继续观察？

Answer 1

在第二个代码段中，您使用compile函数，在该函数中返回postlink函数（默认），因此您的链接功能无法正常工作。

来自docs。：This(Link) property is used only if the compile property is not defined.（read doc.）

现在，在编译函数中，返回postlink函数并在其中执行每个操作。因此，您绑定到 scope ，而不是$scope

此处代码为：return function (scope, element, attrs) {\\

此问题已在fiddle

中修复

如何在编译级别的指令中使用$ watch在隔离范围内

1 个答案: