javascript - AngularJS 指令传递点击操作或执行 ui-router 状态更改

Question

我有一个按钮(a 标记)，该按钮出现在我网站上的许多位置。它称为“查看演示”，在某些情况下，它只是调用 ui-sref 来导航到演示页面:

<a class="btn btn-primary" ui-sref="hamburger-push" target="_blank">
   View Demo
</a>

用它来制作指令很简单，除了在某些情况下，它有一个与托管页面的 Controller 绑定(bind)的 ng-click:

<a class="btn btn-primary" ng-click="mod.modals.basicMessage()">
  View Demo
</a>

所以我试图制定一个指令，为每种链接都有一个属性，并使这些属性可选。这样，当使用该指令时，我可以包含相关的指令:

<view-demo-button clickaction="mod.modals.basicMessage()"></view-demo-button>

或

<view-demo-button linkaction="stateNameToGoTo"></view-demo-button>

澄清一下，该按钮必须能够或者

1. 调用主 Controller 上的函数，或者
2. 在主机 Controller 中调用 $state.go。

但是，我无法做到这一点。我的模板是:

<div class="view-demo" >
  <a class="btn btn-primary" ng-if="ctrl.hasLink" ui-sref="{{ctrl.linkaction}}" target="_blank">
    View Demo
  </a>
  <a class="btn btn-primary" ng-if="ctrl.hasClick" ng-click="{{ctrl.clickaction}}" target="_blank">
    View Demo
  </a>
</div>

指令是:

(function () {
  'use strict';

  angular.module('app').directive('viewDemoButton', function () {
    return {
      restrict: 'E',
      scope: {},
      bindToController: {
        'linkaction': '@?',
        'clickaction': '@?'
      },
      replace: true,
      templateUrl: 'core/directives/pb-view-demo-button.template.html',
      controller: function ($state) {
        var _this = this;

        _this.hasLink = _this.linkaction || false;
        _this.hasClick = _this.clickaction || false;


      },
      controllerAs: 'ctrl'
    };
  });
})();

不确定这是否是正确的方法，或者这种事情是否有效。

我做了一个Plunker它现在的位置，这是不起作用的。

Answer 1

view-demo-button指令可以简化为一个组件:

  app.component('viewDemoButton',{
      bindings: {
        'linkaction': '@?',
        'clickaction': '&?'
      },
      controllerAs: 'ctrl',
      template: `
         <div class="view-demo" >
           <a class="btn btn-primary" ng-click="ctrl.viewDemoClick()">
              View Demo
           </a>
         </div>`,
      controller: function ($state) {
        var _this = this;

        _this.viewDemoClick = function () {
          console.log("viewDemoClick invoked");
          if (_this.clickaction) {
            _this.clickaction();
          }
          if (_this.linkaction) {
            $state.go(_this.linkaction);
          }
        };
      }
  });

让组件模板调用组件 Controller 中的函数。根据组件元素的属性采取行动。

DEMO on PLNKR