Question

我正在创建我的第一个指令而且我遇到了一些奇怪的行为。 我的链接函数中的console.log（）被调用两次。我已经搜索了一些解决方案，但我看不出我需要如何更改代码来改变行为......

我的index.html：

<html>
<head>
  <title>GCSE Directive TEST</title>
</head>
<body ng-app="gcseTest">

  <google-image-search query="Test query"></google-image-search>

  <!-- Scripts -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
  <script src="gcse-directive.js"></script>
</body>
</html>

GCSE-指令：

angular.module('gcseTest', [])
  .directive('googleImageSearch', [ function(){
      return {
        scope: {
          query: '@'
        },
        templateUrl: 'gcse-popup.html',
        restrict: 'E',
        replace: true,
        link: function ($scope, $element, $attrs) {
          $scope.search = function(){
            console.log("Gebruik query in link-functie: " + $scope.query);
            return "Gebruik query via popup: " + $scope.query;
          }
        }
      };
  }]);

GCSE-popup.html：

<div>
  <h1>Directive Test</h1>
  {{search(query)}}
</div>

有人能解释一下这里发生了什么吗？

Answer 1

您的指令链接函数未被调用两次，其search函数被调用两次。它背后的原因是被调用两次，你在视图绑定中直接使用search函数，所以每当摘要循环运行时，你的视图绑定就会被评估。在这种情况下，摘要周期会运行两次，这就是您的search函数运行两次并且您可以看到console打印两次的原因。

angularjs：两次调用指令链接函数

1 个答案: