您如何根据视图上的控制器触发执行不同操作的按钮单击？

Question

问题

如何根据视图上的控制器触发执行不同操作的按钮单击？

情况

下面我有两个 directives/controllers 共享相同的模板视图。所有数据都正确呈现 - ng-click="{{::vm.action}}" 但是在点击时没有做任何事情。如果我将语法更改为 ng-click="{{::vm.action()}}" ...代码会中断以供查看。

代码

main.html

<confirm-modal></confirm-modal>

<error-modal></error-modal>

modal.html:

<article>
    <h1>{{::title}}</h1>
    <p>{{::body}}</p>
    <button ng-click="{{::action}}">{{::button}}</button>
</article>

确认-modal.directive.js（和控制器）

angular
  .module('common.modal')
  .controller('ConfirmModalController', ConfirmModalController)
  .directive('confirmModal', confirmModal);

/* @ngInject */
function confirmModal() {

  var directive = {
    templateUrl: 'app/widgets/modals/modal.html',
    restrict: 'E',
    controller: ConfirmModalController,
    controllerAs: 'vm',
    bindToController: true
  };

  return directive;
}

function ConfirmModalController(modalService) {

  var vm = this;

  vm.title = 'Confirm Your Subscription';

  vm.body = '.99 per month will be billed to your account.';

  vm.button = 'Subscribe';

  vm.action = function () {
    console.log('confirm subscription');
    modalService.confirmSubscription();
  };

}

错误-modal.directive.js（和控制器）

angular
  .module('common.modal')
  .controller('ErrorModalController', ErrorModalController)
  .directive('errorModal', errorModal);

/* @ngInject */
function errorModal() {
  var directive = {
    templateUrl: 'app/widgets/modals/modal.html',
    restrict: 'E',
    controller: ErrorModalController,
    controllerAs: 'vm',
    bindToController: true
  };

  return directive;
}

function ErrorModalController(modalService) {

  var vm = this;

  vm.title = 'There was an error with your request';

  vm.body = 'Please contact administrator regarding this error';

  vm.button = 'Dismiss';

  vm.action = function () {
    console.log('error on subscription');
    modalService.closeAllModals();
  };
}

Answer 1

{{::vm.action}} 是对函数 vm.action 的引用，而 {{::vm.action()}} 在呈现模板时执行该函数。 Angular 将该函数的 return 值（在本例中未定义）绑定到您的 ng-click。只需去掉点击处理程序中的 Angular 表达式定界符：

<article>
    <h1>{{::vm.title}}</h1>
    <p>{{::vm.body}}</p>
    <button ng-click="vm.action()">{{::vm.button}}</button>
</article>

编辑：抱歉。忘记了 ()

您如何根据视图上的控制器触发执行不同操作的按钮单击？

How do you fire a button click that does different things based on which Controller is on the view?

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-click