Develop Reference

Passing ng-click value to one controller and use it in another controller

I am using a table and a button inside the table pops up a modal. I want to pass the Id value in that row to the modal controller so that I can use it to pass it to the the rest api call and then subsequently load valus in the modal table.
App.js
var app = angular.module("UiApp", ["ServiceApp"]);
app.service('sharedProperties', function () {
var idValue = 'test string value';
return {
getId: function () {
return idValue;
},
setId: function (value) {
idValue = value;
}
}
});
app.controller("PortFolioController", function ($scope, GetPortfolios,sharedProperties) {
$scope.Portfolios = GetPortfolios.query({ pmid: 2 });
console.log($scope.Portfolios);
$scope.addOrder = function (id) {
sharedProperties.setId(id)
};
});
app.controller("OrderController", function ($scope, GetOrders,sharedProperties) {
$scope.item = sharedProperties.getId();
$scope.Orders = GetOrders.query({ id: item});
});
Service.js
var app = angular.module("ServiceApp", ["ngResource"]);
app.factory('GetPortfolios', function ($resource) {
return $resource("http://localhost:61347/api/PortfolioManager/GetPortfolios/");
});
app.factory('GetOrders', function ($resource) {
return $resource("http://localhost:61347/api/PortfolioManager/GetPortfolioOrders/");
});
HTML
<div >
<table class="table table-striped table-hover table-bordered" id="editable-sample" ng-controller="PortFolioController">
<thead>
<tr>
<th>Portfolio ID</th>
<th>Portfolio Name</th>
<th>Portfolio Type</th>
<th>Portfolio Description</th>
<th>Show Stocks</th>
</tr>
</thead>
<tbody>
<tr class="" ng-repeat="portfolio in Portfolios">
<td>{{portfolio.portfolioId}}</td>
<td>{{portfolio.portfolioName}}</td>
<td>{{portfolio.type}}</td>
<td>{{portfolio.description}}</td>
<td> <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal" ng-click="addOrder(portfolio.portfolioId)" >Show <i class="fa fa-info-circle"></i></button></td>
</tr>
</tbody>
</table>
</div>
</div>
<!--Modal start-->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">My Portfolio</h4>
</div>
<div class="modal-body">
<h3>Stock List</h3>
<div class="space15"></div>
<table class="table table-striped table-hover table-bordered" id="editable-sample" ng-controller="OrderController">
<thead>
<tr>
<th>Symbol</th>
<th>Stock Name</th>
<th>Quantity</th>
<th>Market Price</th>
</tr>
</thead>
<tbody>
<tr class="" ng-repeat="order in Orders">
<td>{{order.symbol}}</td>
<td>{{order.executedQuantity}}</td>
<td>{{order.price}}</td>
<td>{{order.createTStamp}}</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close <i class="fa fa-times"></i></button>
</div>

In PortFolioController Controller, you can do:
$rootScope.$broadcast('eventName', id);
and listen to the event in OrderController Controller:
$scope.$on('eventName', function (event, id) {...});
Also you can use AngularJS Service Passing Data Between Controllers to see some examples

or the simpleset way without any service is to use $rootScope and $broadcast an event from one Controller and listen to it in the other Controller
thus, No need of writing an extra service sharedProperties
Something like this :-
app.controller("PortFolioController", function ($scope, GetPortfolios,$rootScope) {
//Other Codes
$scope.addOrder = function (id) {
$rootScope.$broadcast('ID-Clicked', { Id: id});
};
}
app.controller("OrderController", function ($scope, GetOrders,$rootScope) {
//Other Codes
//Listen for the event
$rootScope.$on('ID-Clicked', function(event, data){
$scope.item = data.Id;// data.Id has the Clicked Id
});
}

This approach can be done using 2 ways.
First Way is to broadcast some events from the parent rootscope instance and capture that on the $scope elements.This format is not considered as a good way of coding.
Secondly, to communicate data between controllers use a service.Yeah you are currently on the right,clean & widely accepted path.
Remember that services are singletons.so once instansiated it is available to all controllers.But the challenge here is as soon as you click on button element your service sets your idValue in the service.Now how does the second controller know that.The answer would be register a $watch service to watch if the idValue in the service is changed as below.
app.controller("OrderController", function ($scope, GetOrders, sharedProperties) {
$scope.$watch(function () {
return sharedProperties.getId()
}, function (newValue, oldValue) {
if (newValue != oldValue) {
$scope.item = newValue;
$scope.Orders = GetOrders.query({ id: item });
}
});
});

How to access current row data in angular-datatables using templates?

I am using angular-datatables. There is a column Actions which I render using an inline template. I want to access current row data in that template. How do that?
controller
$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
url: '/api/department',
type: 'GET'
})
.withDataProp('data')
.withOption('processing', true)
.withOption('serverSide', true)
.withPaginationType('full_numbers')
.withOption('createdRow', function (row, data, dataIndex) {
return $timeout(function() {
// Recompiling so we can bind Angular directive to the DT
return $scope.$apply($compile(angular.element(row).contents())($scope));
});
})
.withBootstrap();
$scope.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('name').withTitle('Name'),
DTColumnBuilder.newColumn('actions').withTitle('Actions').withOption("searchable", false)
];
view
<div class="hbox hbox-auto-xs hbox-auto-sm" ng-controller="DepartmentsController">
<!-- Inline Template -->
<script type="text/ng-template" id="actions.html">
<button class="btn btn-primary btn-xs"
ng-click="edit(/** CURRENT ROW ELEMENT ID */)"><i class="fa fa-edit"></i> Edit</button>
<button class="btn btn-danger btn-xs"
ng-click="delete()"><i class="fa fa-trash"></i> Delete</button>
</script>
<div class="bg-light lter b-b wrapper-md">
<h1 class="m-n font-thin h3">Departments</h1>
</div>
<div class="wrapper-md">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-xs-6">
<button class="btn m-b-md btn-md btn-primary " ui-sref="manager.departments.create">
<i class="fa fa-plus"></i> <span class="hidden-sm hidden-xs">Add Department</span></button>
</div>
</div>
<div class="row">
<div class="col-sm-12 m-b-xs">
<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped b-t b-b">
<thead>
<tr>
<th style="width:20%">ID</th>
<th style="width:60%">Name</th>
<th style="width:20%">Actions</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Here is plunkr to help you: http://plnkr.co/edit/iAZBof7g6cp68RnM0X8H?p=preview

After hours of struggle, I found the solution. It's quite obvious when you see it.
I created a new scope and added data to it before passing it to $compile in createRow callback. Creating a new scope is necessary to pass unique data to each row. If you simply passed by $scope.row then each row will have the same row equal to the last row processed.
controller
.withOption('createdRow', function (row, data, dataIndex) {
// Create a new scope for each row, otherwise, data will
// not be unique for each row becuase of data bindings
var $newScope = $scope.$new(true);
$newScope.row = data;
// Pass any methods you are using in current scope
$newScope.delete = $scope.delete;
return $timeout(function() {
// Recompiling so we can bind Angular directive to the DT
return $scope.$apply($compile(angular.element(row).contents())($newScope));
});
});
view
<script type="text/ng-template" id="actions.html">
<button class="btn btn-primary btn-xs" ui-sref="manager.departments.edit({id: {{ row.id }} } )"><i class="fa fa-edit"></i> Edit</button>
<button class="btn btn-danger btn-xs" ng-bootbox-confirm="Are you sure you want to delete this department?" ng-bootbox-confirm-action="delete(row.id)"><i class="fa fa-trash"></i> Delete</button>
</script>

I used the above accepted answer, and it worked fine. However, later when we moved to production and the rows per page changed from 20 to 500, I saw significant performance issues through chrome developer tools (Most time spent on hundreds of setTimer and listener events)
I found the official document here which gives us an example as below:
.withOption('createdRow', createdRow);
// ...
function createdRow(row, data, dataIndex) {
// Recompiling so we can bind Angular directive to the DT
$compile(angular.element(row).contents())($scope);
}
This piece of code does not use the $timeout or $apply functions, but still works well. If you run into performance issues as I did, this may help.

AngularJs with DataTable custom search box

I am working with AngularJs+DataTable library, and I wish to create a custom control that can apply a exactly search function from DataTable, but with custom UI and control. However, the serch() return 0 length result which no consist any string value and the draw() isn't call properly.
I have follow some similar question on github, article and implement with $scope.dtInstance.DataTable.search(...).draw();
but turn out, it wouldn't working, so below is what I try, but same result.
Any suggestion?
Here is my HTML implementation
<button class="btn btn-white btn-sm" type="button"
data-toggle="collapse" data-target="#collapseSearch"
aria-expanded="false"
aria-controls="collapseSearch">
<i class="fa fa-search"></i> Search
</button>
<div class="collapse" id="collapseSearch">
<div class="row margin-top-20px">
<div class="col-sm-12 margin-bottom-5px">
<div class="input-group bookingRecordDataTable_filter dataTables_filter">
<span class="input-group-addon input-addon-green">Search</span>
<input type="search" class="form-control"
ng-model="searchText"
ng-change="searchTable()"
placeholder="search"
aria-controls="bookingRecordDataTable">
</div>
</div>
</div>
</div>
<table datatable="ng"
class="table table-hover"
dt-options="dtOptions"
dt-column-defs="dtColumnDefs" id="bookingRecordDataTable"
dt-instance="dtInstanceCallback">
</table>
Here is the angular controller
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('bInfo', false)
.withOption('bFilter', false)
.withOption('bAutoWidth', false)
.withOption('bLengthChange', false)
.withDOM("<'col-sm-12't><'col-sm-12'p>")
.withOption('order', [0, 'desc'])
.withBootstrap();
$scope.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0).withTitle('Id').notVisible(),
...
];
$scope.dtInstanceCallback = function(dtInstance)
{
var datatableObj = dtInstance;
$scope.tableInstance = datatableObj;
}
$scope.searchTable = function ()
{
console.log($scope.tableInstance);
var query = $scope.searchText;
console.log(query);
var result = $scope.tableInstance.DataTable.search(query, false, false, false);
console.log(result);
$scope.tableInstance.DataTable.search(query, false, false, true).draw();
};

finally, I found out this part of implementation work for me, share it out if anyone also face same issues.
$scope.dtInstance = {};
$scope.searchTable = function ()
{
$scope.dtInstance.DataTable.search($scope.searchText);
$scope.dtInstance.DataTable.search($scope.searchText).draw();
};

Generate dynamic columns in Angular

I need make in Angular table which will be generate dynamic numbers of column, but the number of column I need loading form data base and this information will be display number of columns which will be generated, and then will be loading date form another table in data base to this table (in HTML) but I need to load data only from 6 column to number which I was written about it at the beginning of this comment.
I know I need use ng-repeat on tr, td and write custom filter which display range columns on site, but I don't know how this all merge? How transfer from database (API) number which i use like variable and then add to filter where I use in for loop and then add this to view page where will be display beautiful table with data which I want?
Picture of the output you can see here.
My code so far - controller.js:
'use strict';
var pokayokaCtr = angular.module( 'pokayokaCtr' , [ 'ngRoute' ] );
// -------------------------------------------
// DRAWINGS
// -------------------------------------------
pokayokaCtr.controller( 'drawings' , [ '$scope' , '$http', function( $scope, $http ){
$http.get( 'api/admin/drawings/get' ).
success( function( data ){
$scope.drawings = data;
}).error( function(){
console.log( 'Błąd pobrania pliku z bazy danych! Drawings' );
});
}]);
pokayokaCtr.controller( 'drawingCreate' , [ '$scope' , '$http' , '$timeout', function( $scope , $http, $timeout){
$scope.createDrawing = function ( drawing ) {
$http.post('api/admin/drawings/create', {
drawing : drawing
}).success(function(){
$timeout(function(){
$scope.success = false;
$scope.drawing = {};
} , 1500 );
console.log($scope.drawing);
}).error(function(){
console.log('Error database connect!')
});
};
}]);
pokayokaCtr.controller( 'pokayokes' , [ '$scope' , '$http', '$routeParams', function( $scope, $http, $routeParams ){
var pokayokeName = $routeParams.name;
$scope.name = pokayokeName;
$http.get( 'api/admin/pokayokes/get/' + pokayokeName ).
success( function( data ){
$scope.pokayokes = data;
}).error( function(){
console.log( 'Error database connect!' );
});
}]);
// pokayokaCtr.filter('rangeFilter', function() {
// return function(input, total) {
// total = parseInt(total);
// for (var i=6; i<=total; i++)
// input.push(i);
// return input;
// };
// });
View page:
<div id="page-wrapper" ng-controller="pokayokes">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row">
<div class="col-md-12">
<br>
<div class="flat-panel">
<div class="flat-panel-header">
<h2 class="page-header" ng-repeat="pokayoke in pokayokes | limitTo: 1"><i class="fa fa-paint-brush"></i> Drawing number: {{ pokayoke.nazwa_rys }}</span></h2>
</div>
<div class="flat-panel-body">
<button class="btn btn-warning" href="#"><i class="fa fa-pencil-square-o"></i> Edit name</button>
<button class="btn btn-danger pull-right" ng-click="delete(drawing, $index)"><i class="fa fa-times"></i> Delete</button>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="flat-panel">
<div class="flat-panel-header">
<h2 class="pull-left">Articles in drawing</h2>
<a ng-repeat="pokayoke in pokayokes | limitTo: 1" class="pull-right btn btn-primary" href="#/admin/article/create/part1/{{ pokayoke.nazwa_rys}}" style="margin: 20px 0 15px;"><i class="fa fa-plus"></i> Add new article</a>
</div>
<div class="clearfix"></div>
<div class="flat-panel-body">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>No.</th>
<th>Image</th>
<th>Article name <i class="fa fa-chevron-down"></i> </th>
<th>Colors in article</th>
<th ng-repeat="pokayoke in pokayokes">{{$index}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pokayoke in pokayokes" >
<td>{{$index + 1}}</td>
<td> <i class="fa fa-picture-o"></i> View</td>
<td>{{pokayoke.nazwa_art}}</i> </td>
<td>{{pokayoke.kolory_art}}</td>
<td ng-repeat="num in pokayoke" >{{ num }}</td>
</tr>
</tbody>
</table>
</div> <!-- responive -->
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
And output what I have now: here
I want only first 4 columns and columns where are 'x'.
I don't know how write filter.

Angular, share directive template between click functions

I have a directive which, when called, passes in a controller and an array.
In the controller I pass in, there is an object I want to loop over.
my html looks like this:
<div class="row">
<div class="col-md-6">
<div class="jumbotron" ng-controller="protocolCtrl as pctrl">
<button type="button" id="protocol" class="btn btn-primary btn-lg" ng-click="pctrl.getUpdatedList()"
data-toggle="modal" data-target="#modal">Modify Current Protocols</button>
<!--IN THIS MODAL YOU CAN ADD/CHANGE/DELETE DATA-->
<modal-directive list="pctrl" headers="['ID', 'Protocol']"></modal-directive>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron" ng-controller="categoryCtrl as cctrl">
<button type="button" id="category" class="btn btn-primary btn-lg" ng-click="cctrl.getUpdatedList()"
data-toggle="modal" data-target="#modal">Modify Current Categories</button>
<!--IN THIS MODAL YOU CAN ADD/CHANGE/DELETE DATA-->
<modal-directive list="cctrl" headers="['ID', 'Category']"></modal-directive>
</div>
</div>
</div>
My problem is that no matter what I do, it's always the FIRST directive in the html that showes up, no matter what button I press.
My directive looks like this:
.directive('modalDirective', function(){
return {
restrict: 'E',
templateUrl: '/directives/modal-directive.html',
scope: {
list: '=',
headers: '='
},
link: function(scope, element, attrs){
console.log(attrs.list + ' | ' + attrs.headers);
}
};
});
My modal-directive.html looks like this:
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="h in headers"> {{ h }} </th>
</tr>
</thead>
<tbody>
<!-- Loop through -->
<tr ng-repeat="l in list.list">
<!--Access the actual values inside each of the objects in the array-->
<td ng-repeat="data in l"> {{ data }} </td>
<td>
<button type="button" class="btn btn-primary btn-sm"
data-toggle="modal">Edit</button>
</td>
<td>
<button type="button" class="btn btn-danger btn-sm" ng-click="list.removeData(l)"
data-dismiss="modal">Remove</button>
</td>
</tr>
</tbody>
</table>
Am I using isolated scopes wrong, or is it something else I need to change in order to make this work?
Update
Here is a fiddle, that demonstrates the problem.
No matter which button i click, it displays the same text in the modal body.

You don't really need two controllers and two directives to achieve this. Below is an example of how you can do this. Notice I moved the controller to the row instead of having separate controllers for each column. The controller myCtrl now handles the click functions which are bound to the buttons using the ng-click attribute. This then determines the which text should be placed where by calling there respective functions. IE proto() and cat()
Now this may not be ideal for your situation depending on how you plan on the architecture of your application. But it works for your current problem in terms of what you have provided.
HTML
<body ng-app="TM">
<div class="row" ng-controller="myCtrl as modalControl">
<div class="col-md-6">
<div class="jumbotron" >
<button
ng-click='proto()'
type="button" id="protocol"
class="btn btn-primary btn-lg"
data-toggle="modal"
data-target="#modal">Modify Current Protocols
</button>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron">
<button
ng-click='cat()'
type="button"
id="category"
class="btn btn-primary btn-lg"
data-toggle="modal"
data-target="#modal">Modify Current Categories
</button>
</div>
</div>
<!--IN THIS MODAL YOU CAN ADD/CHANGE/DELETE DATA-->
<modal-directive ctrl="modalControl"></modal-directive>
</div>
</body>
Angular JS
angular.module('TM', [])
.controller('myCtrl', function($scope){
$scope.text ='default';
$scope.proto = function() {
this.text = 'Now looking at the protocol part'
}
$scope.cat = function() {
this.text = 'Now looking at the category part'
}
})
.directive('modalDirective', function(){
return {
restrict: 'E',
scope: true,
template: ['<div id="modal" class="modal fade" role="dialog">',
'<div class="modal-dialog">',
'<div class="modal-content">',
'<div class="modal-header">',
'<h4 class="modal-title">Modal Header</h4>',
'</div>',
'<div class="modal-body">',
'<p> {{ text }} </p>',
'</div>',
'<div class="modal-footer">',
'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>',
'</div>',
'</div>',
'</div>',
'</div>'].join('')
}
});
Demo:
https://jsfiddle.net/DTcHh/10193/
UPDATE:
Okay, I took another look. And even though the above example works. I noticed that I have a few extra things that I didn't necessarily need. For example myCtrl as modalControl doesn't need the as modalControl part. Below is an updated example. I did this one with some different simplified markup.
HTML:
<body ng-app="TestApp">
<div ng-controller="myCtrl">
<button ng-click="one()">One</button>
<button ng-click="two()">Two</button>
<test-directive></test-directive>
</div>
</body>
Angular Example (without Isolated Scope)
angular.module('TestApp', [])
.controller('myCtrl', function($scope){
$scope.text ='default';
$scope.one = function() {
this.text = 'this is one'
}
$scope.two = function() {
this.text = 'this is two'
}
})
.directive('testDirective', function(){
return {
template: "<div id='test'>{{text}}</div>"
}
});
Demo 2:
https://jsfiddle.net/krishollenbeck/v8tczaea/12/
Note this..
restrict: 'E',
scope: true
Was also not needed because I am not using Isolated scope in this example. More info here https://docs.angularjs.org/guide/directive

Please check this JSFiddle.
The reason is that data-target value points to the DOM element id of the modal. If you fixed this id in the directive template, clicking on the button will always initiate the modal with id modal. So you need to make the modalId as another parameter of the directive.
By the way, you can pass a controller to a directive. Just like this JSFiddle:
angular.module('Joy', [])
.controller('MyCtrl', ['$scope', function ($scope) {
this.value = 'Joy';
}])
.directive('passMeContrller', [function () {
return {
restrict: 'A',
scope: {
ctrl: '=',
},
template: '<div>Value: {{ctrl.value}}</div>'
};
}]);
The HTML:
<div ng-app="Joy" ng-controller="MyCtrl as c">
<div pass-me-contrller ctrl="c"></div>
<hr>
<div ng-bind="c.value"></div>
</div>
Because the controller itself is just a JavaScript object.
Just a reminder: you are using protocolCtrl as pctrl, so you need to specify like this.list=....
If you want to pass in a function to the isolated scope, use &.
However, I suggest not to pass in the whole controller to a directive. A controller is designed to:
Set up the initial state of the $scope object.
Add behavior to the $scope object.
Controllers are not supposed to be reused. Usually there are many properties on the $scope, while some of them passed to the directive will not be used by it.