Question

我有一个按钮（a标签），在我的网站上出现了很多地方。它被称为＆＃34;查看演示＆＃34;，在某些情况下，它只是调用ui-sref导航到演示页面：

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

除了在某些情况下，它有一个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>

为了澄清，该按钮必须能够

调用主机控制器上的功能，或
在主机控制器中调用$ 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

在您的范围内使用&绑定。这样它将被视为回调。这就是ng-click的工作原理。

  bindToController: {
    'linkaction': '&?',
    'clickaction': '&?'
  },

Answer 2

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

让组件模板在组件控制器中调用一个函数。根据组件元素的属性执行操作。

DEMO on PLNKR

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

2 个答案: