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

问题

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

形势

下面我有两个指令/控制器，它们共享相同的模板视图。所有数据都正确呈现-但是，

ng click=“{{{：：vm.action}}”

不会在单击时执行任何操作。如果我将语法更改为

ng，请单击=“{{：：vm.action（）}}”

。。。代码中断以供查看

代码

main.html

<confirm-modal></confirm-modal>

<error-modal></error-modal>

error-modal.directive.js（和控制器）

---

{{：：vm.action}

是对函数

vm.action

的引用，而

{{：：vm.action（）}

在呈现模板时执行该函数。Angular正在将该函数的返回值（在本例中未定义）绑定到您的

ng click

。只需去掉单击处理程序中的角度表达式分隔符：

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

{{：：vm.title}
{{：：vm.body}

{{：：vm.button}

---

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

ng单击所需的是表达式，而不是字符串。放下大括号：

ng click=“vm.action（）”

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

}

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

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