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

【问题标题】：How do you fire a button click that does different things based on which Controller is on the view?您如何根据视图上的哪个控制器触发执行不同操作的按钮单击？
【发布时间】：2017-09-26 22:41:23
【问题描述】：

问题

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

情况

下面我有两个指令/控制器共享相同的模板视图。所有数据都正确呈现 - 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>

confirm-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 = '$8.99 per month will be billed to your account.';

  vm.button = 'Subscribe';

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

}

error-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();
  };
}

【问题讨论】：

ng-click 需要一个表达式，而不是字符串。去掉花括号：ng-click="vm.action()"

标签： angularjs angularjs-directive angularjs-scope angularjs-ng-click

【解决方案1】：

{{::vm.action}} 是对函数 vm.action 的引用，而 {{::vm.action()}} 在渲染模板时执行该函数。 Angular 将该函数的返回值（在这种情况下未定义）绑定到您的ng-click。只需去掉点击处理程序中的 Angular 表达式分隔符即可：

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

编辑：对不起。忘记了（）

【讨论】：