javascript - AngularJS:模板添加的 ng-click 不会触发

Question

我在指令模板中动态添加了 ng-click，但它似乎根本没有触发(或已由 Angular 编译)。这是 gist我的文件。

虽然我对范围有疑问，但我认为当前问题不在于范围。但请随意包含我当前范围选项可能出现的任何问题。

我的 HTML 中有这样的结构:

main element | MainCtrl
    | directive 1 | ss-pagination
        | directive 1.1 | ss-pagination-previous
        | directive 1.2 | ss-pagination-next

我有 3 个指令，其中 1 个是 2 个指令的父指令，其模板中包含 ng-click 。原因是，我有一个主分页指令，其中包含设置 |分页功能。另外两个用作 next |上一个按钮。

考虑到我当前正在重构， Controller 代码风格似乎与指令不同。

Answer 1

我想我已经找到问题所在了。将 pagination-prev.directive.js 更改为使用 controllerAs，以便您可以从 View 调用 Controller 的函数 goToPreviousPage，如下所示:

(function(angular, undefined) {
  function paginationPrevious() {
    return {
      restrict: 'EA',
      replace: true,
      transclude: true,
      require: '^ssPagination',
      template: getTemplate,
      controller: 'PaginationPreviousCtrl',
      controllerAs: 'prevCtrl'
    };

    function getTemplate(element, attrs) {
      return [
        '<div ng-transclude ',
        'ng-click="prevCtrl.goToPreviousPage()">',
        '</div>'
      ].join('');
    }
  }

  angular
    .module('app')
    .directive('ssPaginationPrevious', paginationPrevious);
})(angular);