I have a button (an a tag) that is displayed in multiple locations on my website. It is labeled "View Demo", and sometimes it directs to a demo page using an ui-sref:
<a class="btn btn-primary" ui-sref="hamburger-push" target="_blank">
View Demo
</a>
This would be easy to turn into a directive, but occasionally it has an ng-click connected to the hosting page's controller:
<a class="btn btn-primary" ng-click="mod.modals.basicMessage()">
View Demo
</a>
So, I am attempting to create a directive with attributes for each type of link, allowing them to be optional. This way, when using the directive, I can include the relevant attribute:
<view-demo-button clickaction="mod.modals.basicMessage()"></view-demo-button>
or
<view-demo-button linkaction="stateNameToGoTo"></view-demo-button>
To clarify, the button should be able to do either
- Invoke a function on the host controller, or
- Use $state.go in the host controller.
However, I am having trouble implementing this correctly. My template looks like this:
<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>
The directive code is as follows:
(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'
};
});
})();
I am not sure if this approach is correct or if this type of implementation even works.
I have created a Plunker showcasing the current non-functional state of the project.