Develop Reference

How can I call a javascript directive link function from a typescript controller l [duplicate]

This question already has answers here:
How to call a method defined in an AngularJS directive?
(13 answers)
Closed 4 years ago.
Someome, please tell me how can I access a javascript directive link function from a typedScript controller. I have a button outside the directive and I want to call that function in my pageController when my user button is clicked. I´ve tried several tutorials but i can´t have it working.
1-This is an extract of th directive.js file
I want to call the function from my controller
directive.js - javascript
(function () {
'use strict';
angular.module('pdf', []).directive('ngPdf', ['$window', function ($window) {
return {
restrict: 'E',
templateUrl: function (element, attr) {
return attr.templateUrl ? attr.templateUrl : 'app/_infrastructure/pdfViewer/viewer.html';
},
scope: {
pdfUrl: '='
},
link: function (scope, element, attrs) {
var url = scope.pdfUrl;
scope.goPrevious = function () {
if (scope.pageToDisplay <= 1) {
return;
}
scope.pageToDisplay = parseInt(scope.pageToDisplay) - 1;
scope.pageNum = scope.pageToDisplay;
};
}
};
}]);
})();
2-This is the directive template (.hmtl)
<nav class="text-center">
<div class="prev-next-button previous">
<button class="btn btn-danger btn-sm" ng-click="goPrevious()">
<i class="fa fa-arrow-left fa-lg"></i>
</button>
</div>
<div class="prev-next-button next">
<button class="btn btn-danger btn-sm" ng-click="goNext()">
<i class="fa fa-arrow-right fa-lg"></i>
</button>
</div>
<span>Pág: </span>
<input type="text" class="searchPageNumber" min="1" ng-model="pageNum">/
<span>{{pageCount}}</span>
<button class="btn btn-danger btn-sm" title="Diminuir" ng-click="zoomOut()">
<i class="fa fa-minus"></i>
</button>
<button class="btn btn-danger btn-sm" ng-click="fit()">
100%
</button>
<button class="btn btn-danger btn-sm" title="Aumentar" ng-click="zoomIn()">
<i class="fa fa-plus"></i>
</button>
</nav>
<hr style="border-top: 0px; margin-bottom: 0px!important;margin-top: 1px!important" />
<div style="max-height:900px;max-width:1051px;overflow: auto;">
<canvas id="pdf" style="border:2px solid #000000;"></canvas>
</div>
3- This the user page (.html)
<div class="main-content-inner" ng-controller="MyController as Ctrl">
<div class="col-xs-8" >
<div class="form-group" ng-show="(Ctrl.currentProcesso.estadoProcessoId==1 || Ctrl.currentProcesso.estadoProcessoId== 3 ||Ctrl.currentProcesso.estadoProcessoId==6) && Ctrl.appUserBasicInfo.role == 'Escrivão'">
<ng-pdf data-pdf-url="file.pdf" canvasid="pdf" scale="page-fit" page="1"></ng-pdf>
</div>
</div>
<div class="col-xs-3">
<button class="btn btn-success btn-sm btn-next"
ng-click="Ctrl.controllerMethodToCallDirectiveFunction()"
ng-show="true">
NEXT
<i class="tcicons-icon fa fa-arrow-right icon-on-right"></i>
</button>
</div>
</div>
4-Finally this is my controller (MyController.ts)
public enumerarProcessoPushPop = (): boolean => {
//I want to call the directive method here
return true;
}

Methods inside Angular directives are not meant to be called. From the Angularjs documentation:
At a high level, directives are markers on a DOM element (such as an attribute, element
name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

AngularJS ng-click multiple calls

I wrote the next code, but when I click on the trash icon, the ng-click of this element is thrown, but the ng-click of the div container is thrown too, I don't need the second one, just the first call, could some body help me.
<div ng-if="order.selectedProducts === null || order.selectedProducts.length > 0"
class="cartCol hoverable" ng-repeat="product in order.selectedProducts track by $index"
ng-click="showProductDetailed(product)">
<div class="cartHeading" ng-bind="product.name"></div>
<a href="" class="trashIcon" ng-click="removeSelectedProduct(product);">
<i class="fa fa-trash"></i>
</a>
<div class="cartSizeInfo">
<span class="fltLft">{{product.productTypeName}}</span>
<span class="fltRht">Bs. {{product.price}}</span>
</div>
</div>

I had to put $event.stopPropagation(); after the first call.

Directive to externalize view not working

I'm using pageslide directive in order to display a lateral sliding menu when I click on an icon.
This is the usual way to do it, and its working :
<div class="navbar-header">
<span ng-controller="slideController as s">
<a class="navbar-brand" href="javascript:void(0)"
ng-click="s.toggle()"><i class="fa fa-bars fa-lg"></i></a>
<div pageslide ps-open="s.isActive" ps-side="left">
<div style="padding:20px">
<h2>Hello Pageslide</h2>
<p>Put here whatever I want in the lateral menu</p>
<a ng-click="s.toggle()" class="button" >Close</a>
</div>
</div>
</span>
<a class="navbar-brand text-danger" href="javascript:void(0)">Balrog</a>
</div>
But I would lilke to make the menu content in an external template, so I'm trying this :
<div class="navbar-header">
<span ng-controller="slideController as s">
<a class="navbar-brand" href="javascript:void(0)"
ng-click="s.toggle()"><i class="fa fa-bars fa-lg"></i></a>
<menu-item isActive="s.isActive"></menu-item>
</span>
<a class="navbar-brand text-danger" href="javascript:void(0)">Balrog</a>
</div>
with this as menu.html :
<div pageslide ps-open="s.isActive" ps-side="left">
<div style="padding:20px">
<h2>Hello Pageslide</h2>
<p>Put here whatever I want in the lateral menu</p>
<a ng-click="s.toggle()" class="button" >Close</a>
</div>
</div>
also, here is the related controller :
'use strict';
angular.module('BalrogApp').controller('slideController', function(){
this.isActive= false; // This will be binded using the ps-open attribute
this.toggle = function(){
this.isActive= !this.isActive
}
});
and the <menu-item> directive :
angular.module('BalrogApp').directive('menuItem', function () {
return {
restrict: 'E',
templateUrl: "views/menu.html",
scope: {
isActive: '='
},
controller: 'slideController',
controllerAs: 's',
bindToController: true
}
});
So it's not working this way, maybe it is because the main view (including the <menu-item>) is itself included in the main page thanks to <ng-view> ?
Or maybe the pageslide-directive requires the <div pageslide ...> and its parent element to be on the same file ?
I can tell from the console that toggle() is called and changes isActive in both cases but it's not opening the menu with the directive version.
And also, adding ng-controller="slideController as s" to the root <div> with the pageslide attribute didn't change anything.
So how can I make this work with the menu in another file ?

Did you try to replace <div ng-include="menu.html"></div> with <div ng-include="'menu.html'"></div>. According to https://docs.angularjs.org/api/ng/directive/ngInclude, you have to wrap string constants in single quotes.

I highly recommend you not use ng-include. You can get the same approach using directive instead.
For example:
Menu html
<div pageslide ps-open="vm.checked" ps-side="left">
<div style="padding:20px">
<h2>Hello Pageslide</h2>
<p>Put here whatever I want in the lateral menu</p>
<a ng-click="vm.toggle()" class="button" >Close</a>
</div>
</div>
Directive:
function Controller() {
}
Controller.prototype.toggle = function() {
this.checked = !this.checked;
}
angular
.module('BalrogApp')
.directive('menuItem', function() {
return {
templateUrl: 'urltomenu.html',
restrict: 'E',
scope: {
checked: '='
},
controller: Controller,
controllerAs: 'vm',
bindToController: true
}
})
Main template
<div class="navbar-header">
<span ng-controller="slideController as s">
<a class="navbar-brand" href="javascript:void(0)"
ng-click="s.toggle()"><i class="fa fa-bars fa-lg"></i></a>
<menu-item checked="s.checked"><menu-item>
</span>
<a class="navbar-brand text-danger" href="javascript:void(0)">Balrog</a>
</div>
This approach give you more power. All the logic is inside the directive controller and you could reuse this element each time. The scope attribute checked is the "bridge" between your main template if change outside also change inside and also the other way.

Angular UI Typeahead - Prevent dropdown close on select

I wanted to be able to show the whole list after a selection. The way I wanted to do that is by placing the selection in the placeholder and clearing the input's model.
On the typeahead-on-select event, I save the value that was selected and I set the model to be "". I expected the dropdown to appear just like if the input is empty, but it doesn't.
<input type="text" ng-model="myModel" data-min-length="0"
typeahead="item for item in items | filter:$viewValue"
placeholder="{{currentModel}}"
ng-blur="validateSelection()"
typeahead-on-select="onSelect($item, $model, $label)">
When I clear the input's model, typeahead doesn't detect the change in the model. If I then type 1 character and erase it, I get the whole list.
Angular v1.2.9
Angular Bootstrap v0.10.0
Any help would be appreciated, even a different approach.
EDIT:
How do I either prevent the dropdown closing after select or make typeahead detect the change in my model?

I do something similar. I add a button to the right of the typeahead so it looks like a dropdown menu and clicking the button makes the typeahead choices show up. You could do the equivalent of the button click I use to make it happen. You'll have to modify the code below to your needs. This comes from a directive I made
var which = 'idOfTypehead'; // This is actually a variable, I just set it here
// it is the id="XXX" from my typeahead
$("#"+which).focus();
var e = jQuery.Event('keydown', {which: 40 });
$timeout(function() {
$("#"+which).trigger(e);
},0);
} ;

I could solve this just adding a ng-click function stoping the propagation to the modal content. In this way ng-click="dropdownMenuClick($event)".
<header class="top-header clearfix" data-ng-controller="headerController">
<!--modal search panel-->
<li class="dropdown top-bar-item search-panel" ng-show="searchCallback">
<a href="javascript:;" class="dropdown-toggle" toggle="dropdown">
<i class="glyphicon glyphicon-search"></i>
<span>Search modal panel</span>
</a>
<div class="dropdown-menu with-arrow panel panel-dark" style="width: 330px;">
<div class="panel-heading">
<i class="glyphicon glyphicon-search"></i> <span>{{currentSearchTitle}}</span>
</div>
<div ng-click="dropdownMenuClick($event)">
<div class="panel-body">
<div class="row">
<input type="text"
placeholder="Type your word"
ng-model="result"
typeahead="item as item.Name for item in buildings($viewValue)"
typeahead-on-select='onSelect($item, $model, $label)'
class="form-control">
</div>
</div>
</div>
<div class="panel-footer text-right">
<a href="javascript:;" class="" toggle="dropdown" ng-click="searchCallback(seachFilter)">
<i class="glyphicon glyphicon-search"></i>
<span>Search</span>
</a>
</div>
</div>
</li>
<!--modal search panel-->
</header>
In the controller:
(function () {
'use strict';
angular.module('app')
.controller('headerController', [
'$scope', '$http', '$routeParams', 'logger', '$modal', 'appConfig',
function ($scope, $http, $routeParams, logger, $modal, appConfig) {
$scope.dropdownMenuClick = function ($event) {
$event.preventDefault()
};
}
]);
}).call(this);

ng-repeat nested inside Popover not working

I have the following ng-repeat list:
<div class="row msf-row"
ng-repeat="record in recordlist
people-popover>
<div class="col-md-1 msf-centered" ng-show="editItem == false" ng-hide="editItem">
<button class="btn btn-primary form-control msf-paxlist"
rel="popover"
data-content="<li ng-repeat='passanger in record.pax'>
{{passanger.name}}
</li>"
data-original-title="Passanger List">
{{record.pax.length}} <i class="fa fa-user"></i>
</button>
</div>
</div>
I initialize the popover with a directive:
.directive('peoplePopover', function() {
return function(scope, element, attrs) {
element.find("button[rel=popover]").popover({ placement: 'bottom', html: 'true'});
};
})
The problem is the <li ng-repeat="pasanger in record.pax">{{pasanger.name}}</li>, which will not show.
If I use <li ng-repeat="record.pax">{{pax}}</li>, it will display the array, but if I try to list the objects of the array with ng-repeat, it won't work.
This is how the array (record) looks like:
record in recordlist {
date : "02/12/2014"
time : "00.02.01"
car : "369"
pax: [
{
name : "Ben"
chosen : true
},
{
name : "Eric"
chosen : true
}
]
}
Any tips?

I ran into similar problem and I solved it this way.
I wrapped the ng-repeat block in another directive and pass the collection to that external directive.
div class="row msf-row"
ng-repeat="record in recordlist
people-popover>
<div class="col-md-1 msf-centered" ng-show="editItem == false" ng-hide="editItem">
<button class="btn btn-primary form-control msf-paxlist"
rel="popover"
data-content="<new-directive records=record.pax></new-directive>"
data-original-title="Passanger List">
{{record.pax.length}} <i class="fa fa-user"></i>
</button>
</div>
</div>
Inside the new directive, you will have this code.
<li ng-repeat='passanger in record.pax'>
{{passanger.name}}
</li>
Hopefully this helps someone who runs into similar problem.