I have a bootstrap tooltip which isnt rendering within my NG-repeat from my research I see the tooltip wont render on angular driven content and a directive should be created to handle this issue to establish it.
If I have an existing directive relating to this ng-repeat is it possible to include this in the existing directive?
From another stackoverflow article I took on board their tooltip function and tried to apply it to my existing directive but it isn't working:
(function () {
'use strict';
angular
.module("tpAccStatus")
.directive(["tpAccStatusTransactionRow", tpAccStatusTransactionRow], ["tooltip", tooltip]);
function tpAccStatusTransactionRow() {
return {
scope: {
trans: "=tpAccStatusTransactionRow",
accountNumber: "=",
setMessageState: '&'
},
restrict: "A",
replace: true,
templateUrl: "tpAccStatusTransactionRow.directive.html",
bindToController: true,
controller: "tpAccStatusTransactionRowCtrl",
controllerAs: "transCtrl"
};
}
function tooltip() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
$(element).hover(function () {
$(element).tooltip('show');
}, function () {
$(element).tooltip('hide');
});
}
};
}
})();
Within my directive template I then reference:
<td><span tooltip data-toggle="tooltip" title="" data-original-title="Select an Account"><span class="fa fa-sort fa-fw"></span></span></td>
Thanks
Related
I have following code
// Template
<span>
hello world!
</span>
// Directive
'use strict';
var referenceFieldTemplate = require('./reference-field.html');
module.exports = directiveFunction;
/* #ngInject */
function directiveFunction($http) {
return {
restrict: 'E',
scope: {
fieldName: '=',
fieldValue: '='
},
templateUrl: referenceFieldTemplate,
controller: function($scope){
console.log($scope);
},
link: function(scope, element, attr) {
element.bind('mouseover',function(e) {
console.log(e);
});
}
}
}
I'm trying to render custom directive in uib-tooltip using following code
function eventRender(event, element, view) {
var hoverMarkup = '\'<reference-field field-name="test" field-value="test"></reference-field>\''
element.attr({
'uib-tooltip-html': hoverMarkup,
'tooltip-append-to-body': true,
'tooltip-class': 'tooltip-wrapper'
});
$compile(element)($scope);
};
After compilation, the directive is not there in DOM. I want to understand the reason why it's not getting rendered. There are no errors in console.
Thanks in advance.
I've done recently something similar using "uib-tooltip-template", put all your html code inside the template and it will work just fine.
You just need to create a html file with your directive inside and asign it via $scope to the tooltip.
I have a directive that works correctly when RequireJS is not used, and I'm trying to migrate it to an application based on RequireJS.
The directive wraps an Angular UI modal, and uses transclude to populate the modal elements (modal elements are defined in the controller that declares the directive). The problem is that if loaded with RequireJS, the modal does not show ANY elements (i.e. it's empty).
This is the plunk of the directive that works correctly without RequireJS. You will see a modal populated with elements.
This is the plunk of the directive that is loaded with RequireJS. You will see that the modal is empty.
There are no errors thrown when the modal is displayed empty, so I'm not sure how to tackle this problem. Any help will be greatly appreciated.
This is the directive:
define(['app','uiBootstrap'], function (app) {
'use strict';
app.directive("theModal", function($timeout,$uibModal) {
return {
restrict: "AE",
scope: {
control: '='
},
transclude: true,
link: function (scope, element, attrs, ctrl, transclude) {
scope.control = scope.control || {}
scope.control.openModal = function () {
var instance = $uibModal.open({
animation: false,
scope: scope,
windowClass: 'the-modal',
template: '<div>in the template</div><div class="content"></div>',
appendTo: element
});
$timeout(function (){
transclude(scope.$parent, function(clonedContent){
element.find('.content').append(clonedContent);
})
},10);
};
}
}
});
});
And this is how I invoke it:
<div ng-controller="ctl">
<button ng-click="open()">open it!</button>
<div the-modal control="modalCtl">
<p>some text</p>
<input type="text" ng-model="input1" />
</div>
</div>
The issue is you have circular dependency. The app needs your modal module to display things correctly, but your modal directive needs that app. The solution is to load your modal directive into a separate module.
Define a separate Angular Module for Modal
// contents of modal.js (remove app dependency)
define(['uiBootstrap'], function () {
'use strict';
var mod = angular.module('modal', ['ui.bootstrap']);
mod.directive("theModal", function($timeout, $uibModal) {
return {
restrict: "AE",
scope: {
control: '='
},
transclude: true,
link: function (scope, element, attrs, ctrl, transclude){
// removed code for brevity
}
}
});
mod.directive("theButton", function($timeout) {
return {
restrict: "AE",
scope: {
control: '='
},
transclude: true,
link: function (scope, element, attrs, ctrl, transclude){
// removed code for brevity
}
}
});
return mod;
});
Make app depend on Modal
// contents of app.js
define([
'angular',
'uiBootstrap',
'uiRouter',
'modal' // <--- the modal.js directive
], function (angular) {
'use strict';
return angular.module('app', ['ui.bootstrap','ui.router', 'modal']); // <--- also add it here
});
i've created a custom directive in angularjs:
directives.directive('myTop',function($compile) {
return {
restrict: 'E',
templateUrl: 'views/header.html',
}
})
Directive's code:
<div class="my-header">
<button ng-click="alert('x')" class="fa fa-chevron-left"></button>
<h1>SpeakZ</h1>
</div>
for some reason, ng-click doesen't trigger.
I searched over the internet and found that compile / link is the solution for this problem,
but I can't seem to reach a working solution.
I am not using jquery..
You'll need to add a link function to the directive definition for this to work. So basically,
var app = angular.module("myApp", [])
app.directive('myTop',function() {
return {
restrict: 'E',
template: '<button ng-click="clickFunc()">CLICK</button>',
link: function (scope) {
scope.clickFunc = function () {
alert('Hello, world!');
};
}
}
})
And the html:
<div ng-app="myApp">
<my-top></my-top>
</div>
And here's the fiddle: http://jsfiddle.net/4otpd8ah/
Either use link as answered by #Ashesh or just simply add scope. If you set scope false you will not have isolated scope and click will work on directive.
directives.directive('myTop',function($compile) {
return {
restrict: 'EA',
scope: false,
templateUrl: 'views/header.html',
}
})
In angular.js, I use require: "^helpme", to inherit a directive's controller in my directive called actionButton...
angular.module("main.vips").directive("actionButton",
function(LoadbalancerActionButtonService, VipActionButtonService,
NodeActionButtonService, StatusTrackService) {
//get function arguements/services and make them
//accessable for use
var args = Array.prototype.slice.call(arguments);
var services = {};
args.map(function(service) {
//not all services may return objects
if (Object(service) === service) {
services[Object.keys(service)] = service[Object.keys(
service)];
}
});
return {
templateUrl: "vips/directives/action_button.html",
restrict: "AE",
replace: true,
require: "^helpme",
transclude: false,
scope: {
label: "#?",
icon: "#?",
type: "#?",
actions: "=?"
},
link: function(scope, element, attrs) {
return scope.actions = services[attrs.type];
scope.$on('CREATE', function () {
console.log("create");
});
}
}
});
With this template that uses Angular UI Bootstrap dropdown directive:
directives/action_button.html:
<div helpme class="btn-group action-button-icon" dropdown>
....
</div>
How directive is applied:
<div id="{{vip.label}}" action-button type="vip" icon="glyphicon glyphicon-pencil" actions="actions.vips"
class="pull-right"></div>
I get Error: [$compile:ctreq] Controller 'helpme', required by directive 'dropdown', can't be found!.
This makes no sense because because I am requiring helpme directive in actionButton directive.
Is this a bug? Any way I can require other directives in actionButton directive and still use Angular UI Bootstrap's dropdown in actionButton template?
I would create a glossary, using an AngularJS directive. I start with this fiddle
http://jsfiddle.net/angularjsdc/KRVSQ/
I want to change the directive and substitute the modal with a tooltip.
app.directive('glossaryTerm', function () {
return {
controller: 'Glossary',
restrict: 'E',
scope: { /* empty */
},
template: /*HERE MY TOOLTIP TEMPLATE*/,
replace: true,
transclude: true,
compile: function (tElement, tAttrs, transclude) {
return {
pre: function (scope) {
transclude(scope, function (clone) {
scope.term = clone[0].textContent.toLowerCase();
});
},
post: function (scope) {
// load the definition into scope
scope.getDefinition(scope.term);
}
}
}
}
});
Any suggestion? Ideas?
Thanks
In the Angular bootstrap ui example you had to:
include http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js
import the module
var app = angular.module('app', ['app.services', 'ui.bootstrap']);
and surround the variables you were passing into tooltip with {{}}
template: '<span><a class="glossary-term" href="#" tooltip="{{glossary[term]}}">{{term}}</a></span>',
Here's the modified JSFiddle: http://jsfiddle.net/5DuSa/