Question

这是html代码

<!DOCTYPE html>
<html ng-app="exampleapp">
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <title>Directives</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <style>
        .bold {
            font-weight:bold;
        }
        .red {
            color:red;
        }
        .green {
        color:blue;
        }
    </style>
    <script src="~/Scripts/angular.js"></script>
    <script>
        angular.module("exampleapp", []).directive("demoDirective", function ()
        {
            return function (scope, element, attrs)
            {
                var lisElem = angular.element("<ol>");
                element.append(lisElem);
                for(var i=0;i<scope.names.length;i++)
                {
                    lisElem.append(angular.element("<li>").addClass("green").append(angular.element("<span>").text(scope.names[i])));
                }
                var buttons = element.find("button");
                var lielem = element.find("li");
                for (var i = 0; i < buttons.length; i++) {
                    if (buttons.eq(i).attr("id") == "buttonx") {
                        buttons.eq(i).on("click", function (e) {
                            lielem.toggleClass("bold");
                        });
                    }
                    else if (buttons.eq(i).attr("id") == "buttony") {
                        buttons.eq(i).on("click", function (e) {
                            lielem.toggleClass("red green").toggleClass("bold");
                        });
                    }
                }
                scope.$watch('off', function (newvalue)
                {
                    for (var i = 0; i < buttons.length; i++)
                    {
                        if (newvalue==1)
                        {
                            if (buttons.eq(i).attr('id') == "buttonx") {
                                buttons.eq(i).triggerHandler("click");
                            }
                        }
                        else if(newvalue==2)
                        {
                            if (buttons.eq(i).attr('id') == "buttony") {
                                buttons.eq(i).triggerHandler("click");
                            }
                        }
                    }
                });

           };
        }).controller("defaultctrl", function ($scope) {
            $scope.names = ["Apple", "Bananas", "Oranges"];
            $scope.off = 0;
            $scope.enableoff = function (index)
            {
                $scope.off = index;
            }
       });
    </script>
</head>
<body ng-controller="defaultctrl">
    <h3>Fruit</h3>
    <div demo-directive>
        <button id="buttonx" ng-click="enableoff(1)" class="btn btn-primary">Btnx</button>
        <button id="buttony" ng-click="enableoff(2)" class="btn btn-primary">Btny</button>
   </div>
</body>
</html>

当我运行上面的代码时，它会在Chrome浏览器的控制台中给出一个错误，就像第一次点击按钮一样。当我第二次，第三次点击按钮等时不会发生错误....这是控制台中显示的错误的屏幕截图... http://i.imgur.com/mM27edA.png

我想知道为什么会发生错误。我是否以错误的方式使用triggerHandler？

Answer 1

您的错误来自已经处于摘要周期并尝试以编程方式触发事件：

从错误中，我们感兴趣的是此部分：triggering-events-programmatically

您可以使用$timeout或scope.evalAsync在摘要周期之外触发事件。

<!DOCTYPE html>
<html ng-app="exampleapp">

<head>
  <meta name="viewport" content="width=device-width" />
  <title>Directives</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .bold {
      font-weight: bold;
    }
    .red {
      color: red;
    }
    .green {
      color: blue;
    }
  </style>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script>
    angular.module("exampleapp", []).directive("demoDirective", function($timeout) {
      return function(scope, element, attrs) {
        var lisElem = angular.element("<ol>");
        element.append(lisElem);
        for (var i = 0; i < scope.names.length; i++) {
          lisElem.append(angular.element("<li>").addClass("green").append(angular.element("<span>").text(scope.names[i])));
        }
        var buttons = element.find("button");
        var lielem = element.find("li");
        for (var i = 0; i < buttons.length; i++) {
          if (buttons.eq(i).attr("id") == "buttonx") {
            buttons.eq(i).on("click", function(e) {
              lielem.toggleClass("bold");
            });
          } else if (buttons.eq(i).attr("id") == "buttony") {
            buttons.eq(i).on("click", function(e) {
              lielem.toggleClass("red green").toggleClass("bold");
            });
          }
        }
        scope.$watch('off', function(newvalue) {
          for (var i = 0; i < buttons.length; i++) {
            if (newvalue == 1) {
              if (buttons.eq(i).attr('id') == "buttonx") {
                $timeout(function() {
                  buttons.eq(i).triggerHandler("click");
                }, 0, false);
              }
            } else if (newvalue == 2) {
              if (buttons.eq(i).attr('id') == "buttony") {
                scope.$evalAsync(function() {
                  buttons.eq(i).triggerHandler("click");
                });
              }
            }
          }
        });

      };
    }).controller("defaultctrl", function($scope) {
      $scope.names = ["Apple", "Bananas", "Oranges"];
      $scope.off = 0;
      $scope.enableoff = function(index) {
        $scope.off = index;
      }
    });
  </script>
</head>

<body ng-controller="defaultctrl">
  <h3>Fruit</h3>
  <div demo-directive>
    <button id="buttonx" ng-click="enableoff(1)" class="btn btn-primary">Btnx</button>
    <button id="buttony" ng-click="enableoff(2)" class="btn btn-primary">Btny</button>
  </div>
</body>

</html>

为什么triggerHandler（event）给我一个错误？

1 个答案: