Develop Reference

In AngularJS validation, I want to display error message with ui-bootstrap tooltip

environment
AnuglarJS 1.6x
ui-bootstrap2.5
I want to display error messages with tool tip on validation with AngularJS.
I am referring to the directive created by the following jQuery and bootstrap.js with reference to it,
How can I implement it with ui - bootstrap?
Reference sample
http://jsfiddle.net/y9ujn/5/
How to show form input errors using AngularJS UI Bootstrap tooltip?
I tried trying to add attributes of ui-tooltip at the place where tooltip was set in Query, but it does not work.
<script>
var app = angular.module("app", ['ui.bootstrap']);
app.controller('Ctrl', function ($scope) {});
app.directive('validationMessage', function () {
return {
restrict: 'A',
priority: 1000,
require: '^validationTooltip',
link: function (scope, element, attr, ctrl) {
ctrl.$addExpression(attr.ngIf || true);
}
}
});
app.directive('validationTooltip', function ($timeout) {
return {
restrict: 'E',
transclude: true,
require: '^form',
scope: {},
template: '<span class="label label-danger span1" ng-show="errorCount > 0">hover to show err</span>',
controller: function ($scope) {
var expressions = [];
$scope.errorCount = 0;
this.$addExpression = function (expr) {
expressions.push(expr);
}
$scope.$watch(function () {
var count = 0;
angular.forEach(expressions, function (expr) {
if ($scope.$eval(expr)) {
++count;
}
});
return count;
}, function (newVal) {
$scope.errorCount = newVal;
});
},
link: function (scope, element, attr, formController, transcludeFn) {
scope.$form = formController;
transcludeFn(scope, function (clone) {
/
var badge = element[0].firstChild;
var tooltip = angular.element('<div class="validationMessageTemplate tooltip-danger" />');
tooltip.append(clone);
element.append(tooltip);
$timeout(function () {
scope.$field = formController[attr.target];
badge.attr( 'uib-tooltip', "test")
});
});
}
}
});

ui-tinymce directive used into custom directive template : ngModel not updated

I currently have an issue when I call ui-tinymce directive in a custom directive. The custom directive is used to load dynamically links from backend for tinymce advlink plugin (+ load tinymce options object associated with a key passed as an attribute to the directive).
Here is my controller :
module.controller('Ctrl', function ($scope) {
$scope.test = {
val: "gfsgfdgh"
};
});
Here is how I call the directive in HTML:
<tinymce-custom type="minimal" ng-model="test.val"></tinymce-custom>`
And here is my directive :
module.directive('tinymceCustom', function($location, TinyService, Module, GenerateurPage) {
return {
restrict: 'E',
replace: true,
require:"ngModel",
scope: {
ngModel: '='
},
link: function(scope, element, attrs, ngModel){
scope.loaded = {
modules: false,
pages: false,
tinymce: false
};
scope.tinyOptions = {};
var link_list = [];
var modules = [];
var pages = [];
Module.findByOrganisme({}, function (data) {
data.forEach(function(module) {
modules.push({title: module.libelle, value: "/modules/"+module.id});
});
link_list.push({title: "Modules", menu: modules});
scope.loaded.modules = true;
initTiny();
});
GenerateurPage.findByOrganisme({}, function(data) {
data.forEach(function(page) {
pages.push({title: page.titre, value: "/#/generateurPage/afficherPage?id=/"+page.id});
});
link_list.push({title: "Pages", menu: pages});
scope.loaded.pages = true;
initTiny();
});
function initTiny() {
if (!scope.loaded.modules || !scope.loaded.pages) {
return false;
}
scope.tinyOptions = TinyService.options(attrs.type);
console.log(scope);
scope.tinyOptions.link_list = link_list;
scope.loaded.tinymce = true;
}
},
template: '<div ng-if="loaded.tinymce"><textarea ui-tinymce="tinyOptions" ng-model="ngModel"></textarea></div>'
};
});
The problem is that the model passed to ui-tinymce directive is not updated when changing the text with the editor, and the text in the editor is not updated when the model from the controller is changed... BUT, the initial ngModel value is passed to ui-tinymce directive, so I think that is the data binding that is broken. Tried to watch it with $watch but nothing happens.
I can't figure how to fix it so I'm now looking for some help...
Thx

Finaly fixed it changing the approach :
<textarea tinymce-custom="minimal" ng-model="myVar"></textarea >
The final directive :
module.directive('tinymceCustom', function($location, $compile, $q, TinyService, Module, GenerateurPage) {
return {
restrict: 'A',
priority:999,
terminal:true, // prevent lower priority directives to compile after it
scope: true,
require: ['?ngModel'],
link: function(scope, el, attrs) {
// default is basic template
var type = attrs.tinymceCustom ? attrs.tinymceCustom : 'basic';
function loadTinyOptions(name) {
var loaded = {
modules: false,
pages: false,
tinymce: false
};
var link_list = [];
var deferred = $q.defer();
var initTiny = function() {
if (!loaded.modules || !loaded.pages) {
return false;
}
var tinyOptions = TinyService.options(name);
tinyOptions.link_list = link_list;
deferred.resolve(tinyOptions);
};
Module.findByOrganisme({}, function (data) {
var modules = [];
data.forEach(function(module) {
modules.push({title: module.libelle, value: "/modules/"+module.id});
});
link_list.push({title: "Modules", menu: modules});
loaded.modules = true;
initTiny();
});
GenerateurPage.findByOrganisme({}, function(data) {
var pages = [];
data.forEach(function(page) {
pages.push({title: page.titre, value: "/#/generateurPage/afficherPage?id=/"+page.id});
});
link_list.push({title: "Pages", menu: pages});
loaded.pages = true;
initTiny();
});
return deferred.promise;
}
loadTinyOptions(type).then(function(data) {
scope._tinyOptions = data;
el.removeAttr('tinymce-custom'); // necessary to avoid infinite compile loop
el.attr('ui-tinymce', '{{_tinyOptions}}');
$compile(el)(scope);
});
}
};
Hope this can help.

AngularJS: intro.js - change language - options in directive same language

I'm using intro.js in my angular app:
http://code.mendhak.com/angular-intro.js/example/index.html
and all was ok, untill yesterday...
my problem:
when i solve (or skip) tutorial:
and
after i change language and restart tutorial:
and i see same hints (in same language as before), but this text is changed:
what i do wrong?
i call intro.js so:
Start It!
and options:
$scope.IntroOptions = {
steps: [{
element: '.el1',
intro: $translate.instant('text1'),
position: 'bottom'
}, {
element: '.el2',
intro: $translate.instant('text2'),
position: 'bottom'
}],
showStepNumbers: false,
showProgress: false,
exitOnOverlayClick: false,
keyboardNavigation: false,
exitOnEsc: false,
prevLabel: '',
skipLabel: '<strong>skip</strong>',
doneLabel: '<strong>skip</strong>'
};
and whole angularjs directive of intro.js:
var ngIntroDirective = angular.module('angular-intro', []);
ngIntroDirective.directive('ngIntroOptions', ['$timeout', function ($timeout) {
return {
restrict: 'A',
scope: {
ngIntroMethod: "=",
ngIntroExitMethod: "=?",
ngIntroOptions: '=',
ngIntroOncomplete: '=',
ngIntroOnexit: '=',
ngIntroOnchange: '=',
ngIntroOnbeforechange: '=',
ngIntroOnafterchange: '=',
ngIntroAutostart: '&',
ngIntroAutorefresh: '='
},
link: function(scope, element, attrs) {
var intro;
scope.ngIntroMethod = function(step) {
var navigationWatch = scope.$on('$locationChangeStart', function(){
intro.exit();
});
if (typeof(step) === 'string') {
intro = introJs(step);
} else {
intro = introJs();
}
intro.setOptions(scope.ngIntroOptions);
if (scope.ngIntroAutorefresh) {
scope.$watch(function(){
intro.refresh();
});
}
if (scope.ngIntroOncomplete) {
intro.oncomplete(function() {
scope.ngIntroOncomplete.call(this, scope);
$timeout(function() {scope.$digest()});
navigationWatch();
});
}
if (scope.ngIntroOnexit) {
intro.onexit(function() {
scope.ngIntroOnexit.call(this, scope);
$timeout(function() {scope.$digest()});
navigationWatch();
});
}
if (scope.ngIntroOnchange) {
intro.onchange(function(targetElement){
scope.ngIntroOnchange.call(this, targetElement, scope);
$timeout(function() {scope.$digest()});
});
}
if (scope.ngIntroOnbeforechange) {
intro.onbeforechange(function(targetElement) {
scope.ngIntroOnbeforechange.call(this, targetElement, scope);
$timeout(function() {scope.$digest()});
});
}
if (scope.ngIntroOnafterchange) {
intro.onafterchange(function(targetElement){
scope.ngIntroOnafterchange.call(this, targetElement, scope);
$timeout(function() {scope.$digest()});
});
}
if (typeof(step) === 'number') {
intro.goToStep(step).start();
} else {
intro.start();
}
};
scope.ngIntroExitMethod = function (callback) {
intro.exit(); //TODO check callBack
};
if (scope.ngIntroAutostart()) {
$timeout(function() {
scope.ngIntroMethod();
});
}
}
};
}]);
what i do wrong? why my hints are not changing their language?
plunker you could check here:
http://plnkr.co/edit/RsJ29a49soZ4q33gxQhk?p=preview
what i do wrong with angular-translate?

You're using the synchronous $translate.instant() which means that your intro property will never update itself when changing language.
You need to manually reload the intro.js configuration (your steps) when the language change. For that you can use angular-translate events like $translateChangeSuccess:
$rootScope.$on('$translateChangeSuccess', function() {
// updating steps config with $translate.instant() function
$scope.IntroOptions.steps = [{
element: '.el1',
intro: $translate.instant('text1'),
position: 'bottom'
}, [...]];
});

How to call controller function from directive in angular js ?

I am opening a dialog-box on click of button.I want to add endless scroll in that.
Problem:
When user scrolls at the end of dialog-box i want to call addMoreData() written in controller.
HTML of Dialog-box:
<modal-dialog show='modalShown' width='60%' height='325px' >
<div id='diaogContainer'>
<p>Modal Content Goes here<p>
</div>
</modal-dialog>
Controller:
sampleApp.controller('view3Controller', function($scope) {
$scope.modalShown = false;
$scope.toggleModal = function() {
$scope.modalShown = !$scope.modalShown;
}
**$scope.showMore = function(){
console.log('showMore');
}**
});
Directive of Dialog-box:
sampleApp.directive('modalDialog', function() {
return {
restrict: 'E',
scope: {
show: '='
},
replace: true, // Replace with the template below
transclude: true,
link: function(scope, element, attrs) {
scope.dialogStyle = {};
if (attrs.width)
scope.dialogStyle.width = attrs.width;
if (attrs.height)
scope.dialogStyle.height = attrs.height;
scope.hideModal = function() {
scope.show = false;
};
},
template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay'ng-click='hideModal()'></div><div class='ng-modal-dialog' hello **scrolly='showMore()'** ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"
};
});
Directive to load more data:
sampleApp.directive('hello', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var raw = element[0];
element.bind('scroll', function () {
console.log(raw.scrollTop +'-------'+raw.offsetHeight+'----'+raw.scrollHeight);
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
// here is problem
// I am not able to call function through this attr
//
**scope.$apply(attrs.scrolly);**
}
});
}
};
});

You can't pass in a function to a directive through an attribute, you can however pass it through an isolate scope. Pass a reference to the function you wish to call to the directive:
sampleApp.directive('hello', function () {
return {
restrict: 'A',
scope:{
onScrollEnd:'&'
},
link: function (scope, element, attrs) {
var raw = element[0];
element.bind('scroll', function () {
console.log(raw.scrollTop +'-------'+raw.offsetHeight+'----'+raw.scrollHeight);
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
scope.onScrollEnd();
}
});
}
};
});
Now assuming you have the addMoreData() function defined on your controller, you can pass it to the directive this this:
<div hello on-scroll-end='addMoreData()'></div>
EDIT
I think the problem is that the hello directive can't access functions on the parent controller since the modalDialog directive is using an isolated scope, therefore making everything o the parent controller invisible. Pass the function to through the isolate scope of the modalDialog Directive as well:
scope: {
show: '=',
onScrollEnd:'&'
},

you can try like this.
Directive part
var module = angular.module('direc');
module.directive("direcApp", ['$timeout', function ($timeout) {
return {
restrict: 'E',
templateUrl: "template/template.html",
compile: function (iel, iattr) {
return function (scope, el, attr) {
}
},
scope: {
type: "#",
items: '=',
onClick: '&',
val: "="
},
controller: function ($scope) {
$scope.selectItem = function (selectedItem) {
$scope.val = selectedItem;
if (angular.isFunction($scope.onClick)) {
$timeout($scope.onClick, 0);
}
};
}
};
}]);
Controler part
var app = angular.module('app', ['direc']);
app.controller("appCtrl", ['$scope', '$http', function ($scope, $http) {
var t = {
count: function () {
return $scope.$$watchersCount; // in angular version 4 get total page listener
},
val1: "",
onClick: function () {
console.log($scope.data.val1);
},
items: [{ text: 'Seçenek 1', value: '1' },
{ text: 'Seçenek 2', value: '2' },
{ text: 'Seçenek 3', value: '3' },
{ text: 'Seçenek 4', value: '4' },
{ text: 'Seçenek 5', value: '5' }]
};
angular.extend(this, t);
}]);
Html part
<div ng-controller="appCtrl as data">
<div><b>Watcher Count : {{data.count()}}</b></div>
<direc-app items="data.items"
val="data.val1"
on-click="data.onClick1()"
>
</selection-group>
</div>

Add data as parameter to directive: scope: { data: '='}, and in directive just data.push({name:'i am new object'})
Add function parameter to directive as suggested in previous answer.

How to make directive enable/Disable ?

I have created directive in Angular.I am calling popover directive from mybox. i wish to make popover directive Active only after click on Enable button .
I thought for ng-include but incase of directive how can i use ?
Please suggest ....
Fiddle :: http://jsfiddle.net/JNqqU/278/
Directive Code ::
var bootstrap = angular.module("bootstrap", []);
bootstrap.directive('myBox', function ($compile) {
return {
restrict: "E",
transclude: true,
template: "<span>Hello In side Box <a href='#' pop-over items='items' title='Mode of transport'>Show Pop over</a> </span>",
link: function (scope, element, attrs) {
var popOverContent;
if (scope.items) {
var html = getTemplate("items");
popOverContent = $compile(html)(scope);
}
var options = {
content: popOverContent,
placement: "bottom",
html: true,
title: scope.title
};
$(element).popover(options);
},
scope: {
items: '=',
title: '#'
}
};
});
bootstrap.directive('popOver', function ($compile) {
var itemsTemplate = "<ul class='unstyled'><li ng-repeat='item in [1,2,3,4,5,6,7,8]'>{{item}}</li></ul>";
var getTemplate = function (contentType) {
var template = '';
switch (contentType) {
case 'items':
template = itemsTemplate;
break;
}
return template;
}
return {
restrict: "A",
transclude: true,
template: "<span ng-transclude></span>",
link: function (scope, element, attrs) {
var popOverContent;
if (scope.items) {
var html = getTemplate("items");
popOverContent = $compile(html)(scope);
}
var options = {
content: popOverContent,
placement: "bottom",
html: true,
title: scope.title
};
$(element).popover(options);
},
scope: {
items: '=',
title: '#'
}
};
});
bootstrap.directive( 'dismissPopovers', [ '$http', '$templateCache', '$compile', '$parse', function ( $http, $templateCache, $compile, $parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('mouseup', function(e) {
var clickedOutside = true;
$('.popover-link').each(function() {
if ($(this).is(e.target) || $(this).has(e.target).length) {
clickedOutside = false;
return false;
}
});
if ($('.popover').has(e.target).length) {
clickedOutside = false;
}
if (clickedOutside) {
$('.popover').prev().click();
}
});
}
};
}]);

You could override the bootstrap directive to pass it a parameter wether it should display the popver or not. First add a variable to the directive attributes :
Controller :
$scope.popOverShouldOpen = whatYouWantThere;
Template :
<div pop-over pop-over-should-open="popOverShouldOpen"></div>
Then add it to the directive scope :
scope: {
items: '=',
title: '#',
popOverShouldOpen: "="
}
Then put "if" statements inside the link function :
link: function (scope, element, attrs) {
if( scope.popOverShouldOpen === true ){
var popOverContent;
if (scope.items) {
var html = getTemplate("items");
popOverContent = $compile(html)(scope);
}
var options = {
content: popOverContent,
placement: "bottom",
html: true,
title: scope.title
};
$(element).popover(options);
}
},
Or you could simply do this, depending on your context :
<div pop-over ng-show="popOverShouldOpen"> Hello there ! </div>
<div ng-hide="popOverShouldOpen"> Hello there ! </div>
Of course this last one is a quick hack. For a massive usage prefer the first !