how to use a model property as variable ng-click - angularjs

I'd like to have function calls for ng-click stored as strings in my model.
I can't use ng-click="m.func", and if i'm using ng-click="{{m.func}}" ist also not working.
http://jsfiddle.net/j8wW5/19/
It also looks like angular 1.2.0 throws an error in case of ng-click="{{m.func}}".
How can I bring it to work?
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="m in model">{{m.caption}}</div>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.model = [
{
caption: 'callme a',
func : 'callme_a()'
},
{
caption: 'callme b',
func : 'callme_b()'
}
]
$scope.callme_a = function() {
alert("called a");
}
$scope.callme_b = function() {
alert("called b");
}
});

You can do something like this:
In your html:
<div ng-repeat="m in model">{{m.caption}}</div>
In your controller:
$scope.callme_a = function() {
alert("called a");
}
$scope.callme_b = function() {
alert("called b");
}
$scope.model = [
{
caption: 'callme a',
func : $scope.callme_a
},
{
caption: 'callme b',
func : $scope.callme_b
}
]
$scope.call = function(el) {
el.func();
}
Fiddle

You can use
window["functionName"](arguments) //if the functioName is defined in global (window's scope)
OR
$scope["functionName"](arguments) //if the functioName is defined for $scope
So, updated controller code (of Beterraba) would be
callme_a = function() {
alert("called a");
}
callme_b = function() {
alert("called b");
}
$scope.model = [
{
caption: 'callme a',
func : "callme_a"
},
{
caption: 'callme b',
func : "callme_b"
}
]
$scope.call = function(el) {
window[el.func](arguments)
}

This is a variation on #Beterraba's answer.
Here is the fiddle.
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="m in model">{{m.caption}}</div>
</div>
JS:
$scope.call = function(func) {
$scope[func]();
}
If you have to use strings to define the functions then this will work. But I would urge you to look again at your design.
Also, in order for this to work, you must take out the () in the function string:
$scope.model = [
{
caption: 'callme a',
func : 'callme_a'
},
{
caption: 'callme b',
func : 'callme_b'
}
]

It could be that ng-click is attaching an event listener to the dom with the ng-click attribute before it's evaluated to a string.
So, I've overridden the ngclick with a timeout to make what you want work :)
var app = angular.module('myApp', []);
app.directive('ngClick', ['$timeout','$parse', function($timeout, $parse) {
return {
compile: function($element, attr) {
return function(scope, element, attr) {
//I've wrapped this link function code in a $timeout
$timeout(function() {
var fn = $parse(attr["ngClick"]);
$(element[0]).on("click", function(event) {
scope.$apply(function() {
fn(scope, {$event:event});
});
});
})
};
}
};
}]);
(Here is the source code for ngClick - https://github.com/angular/angular.js/blob/master/src/ng/directive/ngEventDirs.js)
Check the fiddle here with the demo - http://jsfiddle.net/R2Cc9/5/

Related

Angular JS watch factory variable

I have a factory variable which is shared by two directives. One directives changes it and I need it to update the value in other directive as well.
This is my factory code
commonApp.factory('setSmsMessage', [function () {
var factoryObj = {
data: {
isSms: false
},
setSms: function () {
factoryObj.data.isSms = true;
},
reset: function () {
factoryObj.data.isSms = false;
}
};
return factoryObj;
}]);
This is my one directive
commonApp.directive('osSendMessage', ['setSmsMessage',
function (setSmsMessage) {
return {
restrict: 'A',
scope: {
sent: '='
},
link: function (scope, element, attrs) {
},
controller: function ($scope) {
$scope.setSmsMessage = setSmsMessage.data;
$scope.$watch('setSmsMessage.isSms', function (newValue, oldValue, scope) {
console.log(setSmsMessage.data.isSms);
}, true);
},
templateUrl: "/Static/js/AngularApps/MessageCenter/sendmessage/Templates/sendmessages.html"
};
}]);
This is my other directive which sets the variable
commonApp.directive('osMessageCenterMenu', ['setSmsMessage', function (setSmsMessage) {
return {
restrict: 'A',
scope: {
messages: "="
},
controller: function ($scope) {
},
link: function (scope) {
// opening sms
$("#toggleSendSmsMessage").click(function () {
scope.openSendSms();
});
scope.openSendSms = function () {
console.log("from menu: " + setSmsMessage.data.isSms);
setSmsMessage.setSms();
console.log("from menu: " + setSmsMessage.data.isSms);
$("#SendMessageForm").toggle();
}
// end here
,
templateUrl: "/Static/js/AngularApps/MessageCenter/Templates/messageCenterMenu.html"
};
}]);
But the value is not updated in the other controller which is listening to it
A better way would be to store the isSms property in a global object like so:
commonApp.factory('setSmsMessage', [function ()
{
var factoryObj = {
data: {
isSms: false
},
setSms: function ()
{
factoryObj.data.isSms = true;
},
reset: function ()
{
factoryObj.data.isSms = false;
}
};
return factoryObj;
}]);
Now in your controller link the $scope to the factories global object which holds the isSms property.
// Link setSmsMessage to the factories data object
$scope.setSmsMessage = setSmsMessage.data;
// Now call the setSms() function. The $scope.setSmsMessage will be updated after the call.
setSmsMessage.setSms();
// You can now watch for changes in the $scope like so
$scope.$watch('setSmsMessage.isSms', function (newValue, oldValue, scope) {
console.log(setSmsMessage.data.isSms);
}, true);
Working demo
(function() {
var commonApp = angular.module("app", []);
commonApp.factory('setSmsMessage', [function ()
{
var factoryObj = {
data: {
isSms: false
},
setSms: function ()
{
factoryObj.data.isSms = true;
},
reset: function ()
{
factoryObj.data.isSms = false;
}
};
return factoryObj;
}]);
commonApp.controller("smsController", function($scope, setSmsMessage) {
// Link setSmsMessage to the factories data object
$scope.setSmsMessage = setSmsMessage.data;
// Now call the setSms() function. The $scope.setSmsMessage will be updated after the call.
setSmsMessage.setSms();
$scope.reset = function()
{
setSmsMessage.reset();
}
$scope.$watch('setSmsMessage.isSms', function (newValue, oldValue, scope) {
console.log(setSmsMessage.data.isSms);
}, true);
});
commonApp.directive('osMessageCenterMenu', ['setSmsMessage', function (setSmsMessage)
{
return {
restrict: 'A',
scope: {
messages: "="
},
controller: function ($scope)
{
},
link: function (scope)
{
console.log(scope);
// opening sms
$("#toggleSendSmsMessage").click(function ()
{
scope.openSendSms();
});
scope.openSendSms = function ()
{
console.log("from menu: " + setSmsMessage.data.isSms);
setSmsMessage.setSms();
console.log("from menu: " + setSmsMessage.data.isSms);
$("#SendMessageForm").toggle();
}
}
}
}]);
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="smsController">
<div os-message-center-menu>
<button id="toggleSendSmsMessage">reset message</button>
</div>
</div>
</div>
you can also work with $rootScope in your factory and emit an event with custom data and then subscribe to the event in all your controllers
Also, try naming your factory based on functionality, for obvious
reasons.
Following is what am trying to say :-
(function() {
angular
.module("myApp", [])
.factory('smsMessage', ['$rootScope', function($rootScope) {
var factoryObj = {
data: {
isSms: false
},
setSms: function() {
factoryObj.data.isSms = true;
$rootScope.$emit('SET', {isSms : true});
},
reSet: function() {
factoryObj.data.isSms = false;
$rootScope.$emit('RE-SET', {isSms : false});
}
};
return factoryObj;
}])
.controller("controllerOne", function($scope, $rootScope, smsMessage) {
$scope.setSmsMessage = smsMessage.data;
$scope.set = function(){
smsMessage.setSms();
}
$scope.reset = function(){
smsMessage.reSet();
}
$rootScope.$on('SET', function(event, data) {
alert('SET in controllerOne');
$scope.setSmsMessage = data.isSms;
});
$rootScope.$on('RE-SET', function(event, data) {
alert('RE-SET in controllerOne');
$scope.setSmsMessage = data.isSms;
});
})
.controller("controllerTwo", function($scope, $rootScope, smsMessage) {
$scope.setSmsMessage = smsMessage.data;
$scope.set = function(){
smsMessage.setSms();
}
$scope.reset = function(){
smsMessage.reSet();
}
$rootScope.$on('SET', function(event, data) {
alert('SET in controllerTwo');
$scope.setSmsMessage = data.isSms;
});
$rootScope.$on('RE-SET', function(event, data) {
alert('RE-SET in controllerTwo');
$scope.setSmsMessage = data.isSms;
});
});
})()
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="controllerOne">
<label>Controller One</label>
<button ng-click="set()">SET</button>
<button ng-click="reset()">RE-SET</button>
</div>
<div ng-controller="controllerTwo">
<label>Controller Two</label>
<button ng-click="set()">SET</button>
<button ng-click="reset()">RE-SET</button>
</div>
</div>

Webix + angularjs datatable from controller

I have the problem, because datatable is empty, data doesn't binding.
html:
<div id="usersFormDiv" ng-controller="adminController">
<div webix-ui="usersGrid"></div>
</div>
controller
$scope.usersGrid ={
view:"datatable",
id:"usersGridWebix",
autoConfig:true,
select:"row",
data : [
{ id:1,"lp":1, "name":1994,"surname":678790,"email":"xxx#xp.pl","organ":"ogran","location":"Lokalizacja 1, Lokalizacja 2"}
],
columns:[
{ header:"Lp", id:"lp", width:50},
{ header:"Imię", id:"name", width:50},
{ header:"Nazwisko", id:"surname", width:100},
{ header:"Email", id:"email", width:150},
{ header:"Organ", id:"organ", width:100},
{ header:"Lokalizacja", id:"location", width:150}
]
// url: "./app/model/users.json"
};
with webix-ui attribute in div use webix-data="data"
also put
$scope.data = { id:1,"lp":1, "name":1994,"surname":678790,"email":"xxx#xp.pl","organ":"ogran","location":"Lokalizacja 1, Lokalizacja 2"}
I have the same problem, i fixed using this way, for more details refer:-
http://docs.webix.com/desktop__angular.html
You can define the data table structure either on html or within controller as well.
if (window.angular)
(function() {
function id_helper($element) {
//we need uniq id as reference
var id = $element.attr("id");
if (!id) {
id = webix.uid();
$element.attr("id", id);
}
return id;
}
function locate_view_id($element) {
if (typeof $element.attr("webix-ui") != "undefined")
return $element.attr("id");
return locate_view_id($element.parent());
}
//creates webix ui components
angular.module("webix", [])
.directive('webixUi', ["$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link: function($scope, $element, $attrs, $controller) {
var dataname = $attrs["webixUi"];
var callback = $attrs["webixReady"];
var watch = $attrs["webixWatch"];
var wxRoot = null;
var id = id_helper($element);
$element.ready(function() {
if (wxRoot) return;
if (callback)
callback = $parse(callback);
//destruct components
$element.bind('$destroy', function() {
if (wxRoot && !wxRoot.$destructed && wxRoot.destructor)
wxRoot.destructor();
});
//ensure that ui is destroyed on scope destruction
$scope.$on('$destroy', function() {
if (wxRoot && !wxRoot.$destructed && wxRoot.destructor)
wxRoot.destructor();
});
//webix-ui attribute has some value - will try to use it as configuration
if (dataname) {
//configuration
var watcher = function(data) {
if (wxRoot) wxRoot.destructor();
if ($scope[dataname]) {
var config = webix.copy($scope[dataname]);
config.$scope = $scope;
$element[0].innerHTML = "";
wxRoot = webix.ui(config, $element[0]);
if (callback)
callback($scope, {
root: wxRoot
});
}
};
if (watch !== "false")
$scope.$watch(dataname, watcher);
watcher();
} else {
//if webix-ui is empty - init inner content as webix markup
if (!$attrs["view"])
$element.attr("view", "rows");
var ui = webix.markup;
var tmp_a = ui.attribute;
ui.attribute = "";
//FIXME - memory leaking, need to detect the moment of dom element removing and destroy UI
if (typeof $attrs["webixRefresh"] != "undefined")
wxRoot = ui.init($element[0], $element[0], $scope);
else
wxRoot = ui.init($element[0], null, $scope);
ui.attribute = tmp_a;
if (callback)
callback($scope, {
root: wxRoot
});
}
//size of ui
$scope.$watch(function() {
return $element[0].offsetWidth + "." + $element[0].offsetHeight;
}, function() {
if (wxRoot) wxRoot.adjust();
});
});
}
};
}])
.directive('webixShow', ["$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link: function($scope, $element, $attrs, $controller) {
var attr = $parse($attrs["webixShow"]);
var id = id_helper($element);
if (!attr($scope))
$element.attr("hidden", "true");
$scope.$watch($attrs["webixShow"], function() {
var view = webix.$$(id);
if (view) {
if (attr($scope)) {
webix.$$(id).show();
$element[0].removeAttribute("hidden");
} else
webix.$$(id).hide();
}
});
}
};
}])
.directive('webixEvent', ["$parse", function($parse) {
var wrap_helper = function($scope, view, eventobj) {
var ev = eventobj.split("=");
var action = $parse(ev[1]);
var name = ev[0].trim();
view.attachEvent(name, function() {
return action($scope, {
id: arguments[0],
details: arguments
});
});
};
return {
restrict: 'A',
scope: false,
link: function($scope, $element, $attrs, $controller) {
var events = $attrs["webixEvent"].split(";");
var id = id_helper($element);
setTimeout(function() {
var first = $element[0].firstChild;
if (first && first.nodeType == 1)
id = first.getAttribute("view_id") || id;
var view = webix.$$(id);
for (var i = 0; i < events.length; i++) {
wrap_helper($scope, view, events[i]);
}
});
}
};
}])
.directive('webixElements', ["$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link: function($scope, $element, $attrs, $controller) {
var data = $attrs["webixElements"];
var id = id_helper($element);
if ($scope.$watchCollection)
$scope.$watchCollection(data, function(collection) {
setTimeout(function() {
var view = webix.$$(id);
if (view) {
view.define("elements", collection);
view.refresh();
}
}, 1);
});
}
};
}])
.directive('webixData', ["$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link: function($scope, $element, $attrs, $controller) {
var data = $attrs["webixData"];
var id = id_helper($element);
if ($scope.$watchCollection)
$scope.$watchCollection(data, function(collection) {
if (collection) {
setTimeout(function() {
loadData($element, id, collection, 0);
}, 1);
}
});
}
};
}]);
function loadData($element, id, collection, num) {
if (num > 10) return;
var first = $element[0].firstChild;
if (first && first.nodeType == 1)
id = first.getAttribute("view_id") || id;
var view = webix.$$(id);
if (view) {
if (view.options_setter) {
view.define("options", collection);
view.refresh();
} else {
if (view.clearAll)
view.clearAll();
view.parse(collection);
}
} else {
webix.delay(loadData, this, [$element, id, collection], 100, num + 1);
}
}
})();
{
"student": [ {
"firstName": "Ajinkya", "lastName": "Chanshetty", "contact": 9960282703, "email": "aajinkya#hotmail.com"
}
,
{
"firstName": "Sandip", "lastName": "Pal", "contact": 9960282703, "email": "sandip#hotmail.com"
}
,
{
"firstName": "Neha", "lastName": "Sathawane", "contact": 99608882703, "email": "neha#hotmail.com"
}
,
{
"firstName": "Gopal", "lastName": "Thakur", "contact": 9960000703, "email": "gopal#hotmail.com"
}
]
}
<!doctype html>
<html lang="en" ng-app="webixApp">
<head>
<meta charset="utf-8">
<title>Webix - Angular : Layouts</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.webix.com/edge/webix.css">
<script type="text/javascript" src="https://cdn.webix.com/edge/webix.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
var app = angular.module('webixApp', ["webix"]);
app.controller('jsonCtrl', function($scope, $http) {
$http.get('data.json').then(function(response) {
$scope.content = response.data.student
})
})
app.controller('extCtrl', function($scope, $http) {
$scope.myTable = {
view: "datatable",
columns: [{
id: "name",
header: "Name",
css: "rank",
width: 150
},
{
id: "username",
header: "UserName",
width: 150,
sort: "server"
},
{
id: "email",
header: "Email ID",
width: 200,
sort: "server"
},
{
id: "website",
header: "Website",
width: 150
}
],
autoheight: true,
autowidth: true,
url: "https://jsonplaceholder.typicode.com/users"
}
})
</script>
</head>
<body>
<div webix-ui type="space">
<div height="35">Welcome to Angular Webix App </div>
<div view="cols" type="wide" margin="10">
<div width="200">
<input type="text" placeholder="Type something here" ng-model="app"> Hello {{app}}!
</div>
<div view="resizer"></div>
<div view="tabview" ng-controller="jsonCtrl">
<div header="JSON Data Fetch Example">
<div ng-controller="jsonCtrl">
<div webix-ui view="datatable" webix-data="content" autoheight="true" select="row" fillspace="true">
<div autowidth="true" view="column" id="firstName" sort="int" css="rating" scrollY="true">First Name</div>
<div view="column" id="lastName" sort="int">Last Name</div>
<div view="column" id="contact" sort="int">Contact</div>
<div view="column" id="email" sort="string" width="200">E mail</div>
</div>
</div>
</div>
</div>
<div view="resizer"></div>
<div view="tabview" ng-controller="extCtrl">
<div header="External Source Data Table">
<div webix-ui="myTable"></div>
</div>
</div>
</div>
</div>
</body>
</html>

Calling parent directive method from child directive through attrs

This is the scenario :
<export-team>
<ul>
<li>
<button buy-ticket="{{data}}" buy-callback="onBuyTicket()">buy</button>
</li>
<li>
<button buy-ticket="{{data}}" buy-callback="onBuyTicket()">buy</button>
</li>
</ul>
</export-team>
The buyTicket directive
(function() {
'use strict';
angular
.module('myApp')
.directive('buyTicket', buyTicket);
/** #ngInject */
function buyTicket($parse, ngDialog, authService, APPCONFIG, $rootScope, shareToken, contestsFactory, shareCurrentTicket, shareIdSession, shareSessionAAMS, $location) {
var vm = this;
var directive = {
restrict: 'A',
link : function(scope, element, attributes) {
var buyCompatible = attributes['buyCompatible'];
function addZero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
var buyTicket = function(contest) {
var d = new Date();
var y = d.getFullYear();
var m = addZero(d.getMonth()+1);
var day = addZero(d.getDate());
var h = addZero(d.getHours());
var min = addZero(d.getMinutes());
var s = addZero(d.getSeconds());
var date = ''+y+m+day+h+min+s+'';
var transactionId = $rootScope.TRANSACTIONID;
var currentTOKEN = shareToken.get();
var data = {
idSessione:currentTOKEN, // ->TOKEN
userAgent:navigator.userAgent,
sessioneAAMS:contest.aams_session_id,
gameId:APPCONFIG.GAME_ID,
transactionId:transactionId,
dateTime:date,
buyIn:contest.buy_in
}
var dialogLoading = ngDialog.open({
closeByDocument : false,
closeByEscape : false,
showClose : false,
id : 'ft-modal-loading',
controller: ['$scope', function($scope){
$scope.bodyUrl = 'app/components/modals/body/loading.html';
$scope.title = 'Acquisto Ticket';
$scope.error = 'Il sistema sta procedendo all\'acquisto del ticket';
}]
});
contestsFactory.buyTicket(data).success(function(response){
dialogLoading.close();
if (response.esito == "0") {
if (!buyCompatible) {
shareCurrentTicket.set(response.ticketSogei);
shareSessionAAMS.set(contest.aams_session_id);
shareIdSession.set(contest.id_session);
$location.path('my-contests/'+contest.id_contest+'/'+contest.contest_status);
}
} else {
var message = response.descrizione;
var ids = ngDialog.getOpenDialogs();
var dialogError = ngDialog.open({
id : "ft-modal-error-2",
controller: ['$scope', function($scope){
$scope.bodyUrl = 'app/components/modals/body/error.html';
$scope.title = 'Errore';
$scope.error = message;
}]
});
}
})
.error(function(){
var dialogErrorNotEndled = ngDialog.close('ft-modal-loading');
ngDialog.open({
id : 'ft-modal-error',
controller: ['$scope', function($scope){
$scope.bodyUrl = 'app/components/modals/body/error.html';
$scope.title = 'Errore';
$scope.error = 'Il servizio non è attualmente disponibile';
}]
});
})
}
var openConfirmBuyTicket = function(contest) {
contest = JSON.parse(contest);
if (ngDialog.isOpen('ft-modal-contest-detail')) {
ngDialog.close('ft-modal-contest-detail');
};
if (!authService.isLogged()) {
ngDialog.open({
controller: ['$scope', function($scope){
$scope.bodyUrl = 'app/components/modals/body/not_logged.html';
$scope.title = 'Spiacenti';
$scope.error = 'Devi essere loggato per poter partecipare ad un contest';
}]
});
} else {
ngDialog.openConfirm({
controller: ['$scope', function($scope){
$scope.title = 'CONFERMA';
$scope.bodyUrl = 'app/components/modals/body/confirm_buy.html';
$scope.contest_name = contest.name_contest;
$scope.buy_in = contest.buy_in;
$scope.currency = APPCONFIG.CURRENCY_SYMBOL;
}],
}).then(function (confirm) {
buyTicket(contest);
}, function(reject) {
});
}
}
element.on('click', function(e){
var contest = attributes['buyTicket'];
openConfirmBuyTicket(contest);
})
}
};
return directive;
}
})();
The export directive
(function() {
'use strict';
angular
.module('myApp')
.directive('exportTeam', exportTeam);
/** #ngInject */
function exportTeam(contestsFactory, ngDialog, APPCONFIG, formatDateFactory) {
var vm = this;
var directive = {
restrict: 'AE',
transclude: true,
controller : function($scope) {
$scope.test = function() {
alert('hey');
}
},
link : function(scope, element, attributes) {
element.on('click', function(e){
var ticket = attributes['exportTeam'];
var id_session = attributes['idsession'];
scope.openExportTeamDialog(ticket, id_session, false);
})
scope.openExportTeamDialog = function(ticket, aams_session_id, afterSave) {
ngDialog.open({
id : 'ft-modal-exportTeam-detail',
className : 'ngdialog ngdialog-theme-default ft-dialog-exportTeam',
controller: ['$scope', 'contestsFactory', 'APPCONFIG', function($scope, contestsFactory, APPCONFIG){
$scope.title = "Aggiungi contest compatibili";
$scope.bodyUrl = 'app/components/modals/body/exportTeam.html';
$scope.contentLoading = true;
$scope.currency = APPCONFIG.CURRENCY_SYMBOL;
$scope.afterSave = afterSave;
$scope.CompatibleContests = [];
contestsFactory.getCompatibleContests(ticket).then(function(response){
angular.forEach(response.data[0], function(item, i){
var multientryOptions = [];
if(item.multientry > 1) {
item.isMultientry = false;
var n = parseInt(item.multientry);
for (i = 1; i <= n; i++) {
multientryOptions.push({
text : i+" team",
value : i
})
}
item.multientryOptions = multientryOptions;
item.multientryOptionSelected = multientryOptions[0];
}else{
item.isMultientry = true;
};
})
$scope.CompatibleContests = response.data[0];
$scope.contentLoading = false;
})
}]
});
}
scope.openExportTeamDialog('N3E94100A725F9QG', 'M3E921013C6DCFCT', false);
}
};
return directive;
}
})();
The buy-ticket directive makes an http call, on the response i want to be able to call the onBuyTicket method of the <export> directive.
I'm trying to understand the best way to do that.
Thanks everyone
This sample show to you how can call an function from your directive
In this sample you can see we just insert data in our directive, and then we handle the data and other action in the directive.
var app = angular.module("app", []);
app.controller("ctrl", function ($scope) {
$scope.dataFromYourController = [
{ name: "Concert Jennifer", value: 200 },
{ name: "007", value: 100 }
];
})
.directive("export", function () {
var template = "<div>" +
"<ul>" +
"<li ng-repeat=\"array in arrays\">" +
"<button ng-click=\"onBuyTicket()\">buy Ticket {{array.name}}</button><hr>" +
"</li>" +
"</ul>" +
"</div>";
return {
restrict: "E",
template: template,
scope: {
data: "="
},
link: function (scope, elem, attrs, ngModel) {
scope.arrays = scope.data;
scope.onBuyTicket = function () {
alert("calling function from directive");
}
}
};
})
<!doctype html>
<html ng-app="app" ng-controller="ctrl">
<head>
</head>
<body>
<h1>call action from your directive</h1>
<export data="dataFromYourController"></export>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>
#eesdil
var directive = {
restrict: 'AE',
transclude: true,
controller : function($scope) {
$scope.onBuyTicket = function() {
alert('hey');
}
}
}
Ho can I call that from the buy-ticket directive ?
Use the $parent
<button buy-ticket="{{data}}" buy-callback="$parent.onBuyTicket()">buy</button>
So the expor directive something like:
var directive = {
restrict: 'AE',
template: '<ng-tansclude></ng-transclude>',
transclude: true,
controller : function($scope) {
$scope.onBuyTicket = function() {
alert('hey');
}
}
}
UPDATED:
see the plunker:
https://plnkr.co/edit/fmyJ4oPLvTiI0TzO7h1b?p=preview
It really depends what you can call and what you cannot based on the scopes... here if you would remove the scope from the export directive would work without the $parent also as export would share the same scope as the parent (main view)
The best way to communicate events from a child directive to a parent directive (or controller) is to use the $emit method of the scope.
What you want to do is take an ng-click event, get additional information with an $http call, and $emit an event with the additional information to be used by your parent directive (or controller).
HTML
<button buy-ticket="data" ng-click="onBuyTicket()">buy</button>
The directive:
angular.module("myApp").directive("buyTicket", function($http) {
function linkFn(scope,elem,attrs) {
scope.onBuyTicket = function() {
var buyData = scope.$eval(attrs.buyTicket);
var url = someFunction(buyData);
$http.get(url).then (function (response) {
var httpData = response.data;
scope.$emit("buyTicket.click", buyData, httpData);
});
};
};
return {
restrict: "AE",
link: linkFn
};
});
In the parent controller:
$scope.$on("buyTicket.click", function (buyData, httpData) {
console.log(buyData);
console.log(httpData);
});
Notice that I used the $eval method to get the data from the variable named by the buy-ticket attribute.
When choosing a name for the event, I recommend including the name of the directive in the event's name. It makes it clear the source of the event and is unlikely to be duplicated elsewhere.

Is it possible to use Webix with AngularJs ui-router?

Only way I could get Webix to render subviews with ui-router was by using separate webix-ui directives but that does not seem right. Is there any clever way to make these two play nicely?
Yes its absolutely possible to use AngularJS UI routing with the Webix components. Here is the small example.
Script file consists of Wbix Component Code. It is mandatory for every Angular Webix Integration. It is present in the JavaScript file.
Angular UI routing has been done using the 'config' and all the Routes are mentioned inside the 'Template' section. You can replace this with the 'TemplateUrl' field and respective file names.
The Full example can be downloaded here from : https://github.com/TheAjinkya/AngularWebixApplication/tree/master/Angular_UI_Router_with_Webix_Tree
if (window.angular)
(function(){
function id_helper($element){
//we need uniq id as reference
var id = $element.attr("id");
if (!id){
id = webix.uid();
$element.attr("id", id);
}
return id;
}
function locate_view_id($element){
if (typeof $element.attr("webix-ui") != "undefined")
return $element.attr("id");
return locate_view_id($element.parent());
}
//creates webix ui components
angular.module("webix", [])
.directive('webixUi', [ "$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link:function ($scope, $element, $attrs, $controller){
var dataname = $attrs["webixUi"];
var callback = $attrs["webixReady"];
var watch = $attrs["webixWatch"];
var wxRoot = null;
var id = id_helper($element);
$element.ready(function(){
if (wxRoot) return;
if (callback)
callback = $parse(callback);
//destruct components
$element.bind('$destroy', function() {
if (wxRoot && !wxRoot.$destructed && wxRoot.destructor)
wxRoot.destructor();
});
//ensure that ui is destroyed on scope destruction
$scope.$on('$destroy', function(){
if (wxRoot && !wxRoot.$destructed && wxRoot.destructor)
wxRoot.destructor();
});
//webix-ui attribute has some value - will try to use it as configuration
if (dataname){
//configuration
var watcher = function(data){
if (wxRoot) wxRoot.destructor();
if ($scope[dataname]){
var config = webix.copy($scope[dataname]);
config.$scope =$scope;
$element[0].innerHTML = "";
wxRoot = webix.ui(config, $element[0]);
if (callback)
callback($scope, { root: wxRoot });
}
};
if (watch !== "false")
$scope.$watch(dataname, watcher);
watcher();
} else {
//if webix-ui is empty - init inner content as webix markup
if (!$attrs["view"])
$element.attr("view", "rows");
var ui = webix.markup;
var tmp_a = ui.attribute; ui.attribute = "";
//FIXME - memory leaking, need to detect the moment of dom element removing and destroy UI
if (typeof $attrs["webixRefresh"] != "undefined")
wxRoot = ui.init($element[0], $element[0], $scope);
else
wxRoot = ui.init($element[0], null, $scope);
ui.attribute = tmp_a;
if (callback)
callback($scope, { root: wxRoot });
}
//size of ui
$scope.$watch(function() {
return $element[0].offsetWidth + "." + $element[0].offsetHeight;
}, function() {
if (wxRoot) wxRoot.adjust();
});
});
}
};
}])
.directive('webixShow', [ "$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link:function ($scope, $element, $attrs, $controller){
var attr = $parse($attrs["webixShow"]);
var id = id_helper($element);
if (!attr($scope))
$element.attr("hidden", "true");
$scope.$watch($attrs["webixShow"], function(){
var view = webix.$$(id);
if (view){
if (attr($scope)){
webix.$$(id).show();
$element[0].removeAttribute("hidden");
} else
webix.$$(id).hide();
}
});
}
};
}])
.directive('webixEvent', [ "$parse", function($parse) {
var wrap_helper = function($scope, view, eventobj){
var ev = eventobj.split("=");
var action = $parse(ev[1]);
var name = ev[0].trim();
view.attachEvent(name, function(){
return action($scope, { id:arguments[0], details:arguments });
});
};
return {
restrict: 'A',
scope: false,
link:function ($scope, $element, $attrs, $controller){
var events = $attrs["webixEvent"].split(";");
var id = id_helper($element);
setTimeout(function(){
var first = $element[0].firstChild;
if (first && first.nodeType == 1)
id = first.getAttribute("view_id") || id;
var view = webix.$$(id);
for (var i = 0; i < events.length; i++) {
wrap_helper($scope, view, events[i]);
}
});
}
};
}])
.directive('webixElements', [ "$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link:function ($scope, $element, $attrs, $controller){
var data = $attrs["webixElements"];
var id = id_helper($element);
if ($scope.$watchCollection)
$scope.$watchCollection(data, function(collection){
setTimeout(function(){
var view = webix.$$(id);
if (view){
view.define("elements", collection);
view.refresh();
}
},1);
});
}
};
}])
.directive('webixData', [ "$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link:function ($scope, $element, $attrs, $controller){
var data = $attrs["webixData"];
var id = id_helper($element);
if ($scope.$watchCollection)
$scope.$watchCollection(data, function(collection){
if (collection){
setTimeout(function(){
loadData($element, id, collection, 0);
},1);
}
});
}
};
}]);
function loadData($element, id, collection, num){
if (num > 10) return;
var first = $element[0].firstChild;
if (first && first.nodeType == 1)
id = first.getAttribute("view_id") || id;
var view = webix.$$(id);
if (view){
if (view.options_setter){
view.define("options", collection);
view.refresh();
}else{
if (view.clearAll)
view.clearAll();
view.parse(collection);
}
} else {
webix.delay(loadData, this, [$element, id, collection], 100, num+1);
}
}
})();
<!doctype html>
<html lang="en" ng-app="webixApp">
<head>
<meta charset="utf-8">
<title>Webix - Angular : Layouts</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.webix.com/edge/webix.css">
<script type="text/javascript" src="https://cdn.webix.com/edge/webix.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
var app = angular.module('webixApp', [ "webix", 'ui.router' ]);
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/add");
$stateProvider
.state('/add', {
url : '/add',
template : 'This is the Routed Addition File'
})
.state('/sub', {
url : '/sub',
template : 'This is the Routed Subtraction File'
})
.state('/div', {
url : '/div',
template : 'This is the Routed Division File'
})
.state('/multi', {
url : '/multi',
template : 'This is the Routed Multiplication File'
})
})
app.controller('jsonCtrl', function($scope){
var treeData = { data: [
{id:"root", value:"Super Micro Flow", open:true, link : "add", data:[
{ id:"1", open:true, value:"AP1", link : "multi", data:[
{ id:"1.1", value:"2G09#M10000761", link : "div", data:[
{ id:"1.11", value:"2G09#M10000761", link : "add", data:[
{ id:"1.11", value:"2G09#M10000761", link : "sub" },
{ id:"1.12", value:"2G09#M10855757", link : "multi"},
{ id:"1.13", value:"2G09#D10PP0761", link : "div" }
] },
{ id:"1.12", value:"2G09#M10855757", link : "multi"},
{ id:"1.13", value:"2G09#D10PP0761", link : "div" }
] },
{ id:"1.2", value:"2G09#M10855757", link : "multi"},
{ id:"1.3", value:"2G09#D10PP0761", link : "div" }
]},
{ id:"2", open:false, value:"AP12", link : "multi",
data:[
{ id:"2.1", value:"2G09#M10000761", link : "sub" },
{ id:"2.2", value:"2G09#M10855757", link : "multi"},
{ id:"2.3", value:"2G09#D10PP0761", link : "div" }
]},
{ id:"3", open:false, value:"EP45", link : "div",
data:[
{ id:"3.1", value:"2G09#M10000761", link : "sub" },
{ id:"3.2", value:"2G09#M10855757", link : "multi"},
{ id:"3.3", value:"2G09#D10PP0761", link : "div" }
]},
{ id:"4", open:false, value:"CR7767", link : "sub",
data:[
{ id:"4.1", value:"2G09#M10000761", link : "sub" },
{ id:"4.2", value:"2G09#M10855757", link : "multi"},
{ id:"4.3", value:"2G09#D10PP0761", link : "div" }
]}
]}
]
}
$scope.myTree = {
view:"tree",
data: treeData,
template: "{common.icon()}{common.folder()}<a ui-sref='#link#' href='##link#'>#value#</a>",
}
})
</script>
</head>
<body ng-controller="jsonCtrl">
<div webix-ui type="space">
<div height="35">Welcome to Angular Webix App </div>
<div view="cols" type="wide" margin="10">
<div width="300">
<input type="text" placeholder="Type something here" ng-model="app">
Hello {{app}}!
<div webix-ui="myTree"></div>
</div>
<div view="resizer"></div>
<div view="tabview" >
<div header="Angular UI Routing Example">
<div ng-controller="jsonCtrl">
<div ui-view></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I do not know, I occupy BackboneJS, you can look at the example of Webix
var routes = new (Backbone.Router.extend({
routes:{
"":"index",
"menu/:id":"pagechange",
},
pagechange:function(id){
console.log("Change Page to "+ id);
$$("page"+id).show();
}
}));
routes.navigate("menu/"+1010101, { trigger:true });

How to change the text of button three times in angular?

Hi Friends here i have done the code for change text of button, like if i press the button the text of the button will change. But i need the text of the button to be change one more time,
eg: initially "Button1" -->(click)-->"Button2" -->(click)-->"Button3".
I need button3 also.
please reffer:http://jsfiddle.net/Ljrpd/17/
var app = angular.module('my-app', [], function () {
})
app.controller('AppController', function ($scope) {
$scope.toggle = true;
$scope.$watch('toggle', function(){
$scope.toggleText = $scope.toggle ? 'Button1' : 'Button2';
})
})
Some one help me out in this issue.
Thanks
You don't need toggle variable, you can store selected index as suggested by Peter. I would also add check for last selection:
app.controller('AppController', function ($scope) {
$scope.buttonIndex = 0;
$scope.buttonNames = ['Button 1', 'Button 2', 'Button 3', 'Last Button']
$scope.changeText = function() {
if ($scope.buttonIndex === $scope.buttonNames.length - 1) {
$scope.buttonIndex = 0;
} else {
$scope.buttonIndex += 1;
}
};
});
JS Fiddle
Try my modification:
http://jsfiddle.net/Ljrpd/18/
<button ng-click="toggle = !toggle">{{buttonNames[buttonIndex]}}</button>
var app = angular.module('my-app', [], function () {
})
app.controller('AppController', function ($scope) {
$scope.toggle = true;
$scope.buttonIndex = 0;
$scope.buttonNames = ['first', 'second', 'third']
$scope.$watch('toggle', function(){
$scope.buttonIndex += 1;
})
})
And here's a version without a watch:
http://jsfiddle.net/russf6s9/1/
<button ng-click="incrementButton()">{{buttonNames[buttonIndex]}}</button>
var app = angular.module('my-app', [], function () {
})
app.controller('AppController', function ($scope) {
$scope.buttonIndex = 0;
$scope.incrementButton = function() {
$scope.buttonIndex += 1;
}
$scope.buttonNames = ['first', 'second', 'third']
})
Use a directive:
app.directive('changeText', function(){
return {
restrict: "A",
scope: {
changeText: "="
},
link: function(scope, element, attr) {
scope.index = 0;
element.html(scope.changeText[0]);
element.on('click', function(){
scope.index = (scope.index + 1) % scope.changeText.length;
element.html(scope.changeText[scope.index]);
})
}
};
})
Then in your html:
<body ng-controller="MainCtrl as ctrl">
<button change-text="ctrl.textValues"></button>
</body>
Plnkr
Script:
.controller('myctrl', function ($scope) {
$scope.btntext='button_1';
$scope.changetext = function () {
$scope.btntext = ($scope.btntext=='button_1')?'button_2':($scope.btntext=='button_2')?'button_3':'button_1';
}
});
Markup:
<input type="button" ng-click="changetext()" ng-value="btntext"/>
View in Plunker

Resources