您如何处理指令和控制器中的模板 ng-click

How do you handle a template ng-click in both a directive and controller?

本文关键字：控制器 ng-click 指令 何处理 处理      更新时间：2023-09-26

我有一个带有模板的指令（基本上是两个带有ng单击的按钮）。

app.directive('foo', function(){
    return {
        scope: {
            onNext: "=",
            onPreviousClick: "="
        },
        restrict: "E",
        template: "<button ng-click='onPreviousClick($event)'>Prev</button> <button ng-click='onNextClick($event)'>Next</button>",
        link: function($scope){
            $scope.onPreviousClick = function(){
               console.log("Prev click event from directive");
            }
            $scope.onNextClick = function(){
               console.log("Next click event from directive");
            }
        }
    }
});

现在，当我使用该指令时，我想设置单击处理程序以在控制器中工作。

<foo on-previous-click="ctrl.onPreviousClick($event)"></foo>
app.controller("myController", function($scope){
    this.onPreviousClick = function(){
       console.log("Prev click from the controller.");
    }
});

基本上，我希望单击事件同时"传递"指令和控制器。我希望两个事件处理程序都为上一个按钮单击触发。

但是我只能让一个或另一个单击处理程序工作。如果我注释掉我的指令处理程序，控制器就可以工作，反之亦然。

理想情况下，您应该使用函数绑定&而不是双向绑定，并且也只需从指令处理程序进行调用。

return {
    scope: {
        onNext: "&",
        onPreviousClick: "&"
    },

并通过键值对将事件传递给绑定处理程序，即

    $scope.onPrev({$event: $event });

因此，您可以在链接函数中执行此操作：

 $scope.onPrevClick = function($event) {
    console.log("Prev click event from directive");
    $scope.onPrev({
      $event: $event
    });
  }

或者在模板本身上。

 <button ng-click='onPrevClick($event);onPrev({$event:$event})'>Prev</button>

演示

angular.module('app', []).controller('ctrrl', function($scope) {
  this.onPreviousClick = function() {
    console.log("Prev click from the controller.");
  }
  this.onNextClick = function() {
    console.log("Next click from the controller.");
  }
}).directive('foo', function() {
  return {
    scope: {
      onNext: "&",
      onPrev: "&"
    },
    restrict: "E",
    template: "<button ng-click='onPrevClick($event)'>Prev</button> <button ng-click='onNextClick($event); onNext({$event:event})'>Next</button>",
    link: function($scope) {
      $scope.onPrevClick = function($event) {
        console.log("Prev click event from directive");
        $scope.onPrev({
          $event: $event
        });
      }
      $scope.onNextClick = function() {
        console.log("Next click event from directive");
      }
    }
  }
});;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app="app" ng-controller="ctrrl as ctrl">
  <foo on-prev="ctrl.onPreviousClick($event)" on-next="ctrl.onNextClick($event)"></foo>
</div>

相关文章：