I have 3 nested directives:
ExchangeWidget -> CoinInput (2 total) -> Coin (Several)
The code:
`ExchangeWidgetDirective`
'use strict';
import cointInputTpl from './exchangewidget.html';
function exchangeWidgetComponenet($log) {
'ngInject';
var directive = {
restrict: 'E',
templateUrl: cointInputTpl,
controller: exchangeWidgetController,
controllerAs: 'vm',
bindToController: true,
scope: {
amount: '@',
type: '@',
address: '=',
postSelect: '=',
changeCounterPrice: '='
}
};
return directive;
function exchangeWidgetController ($scope, CHANGED_EVENT_SUFFIX) {
'ngInject';
let self = this;
self.postSelect = function (newCoin, prevCoin, type) {
// TODO: migrate to conf
type = type === 'deposit' ? 'receive' : 'deposit';
let eventData = {
newCoin: newCoin,
prevCoin: prevCoin,
};
let event = 'reset' + type;
$scope.$broadcast(event, eventData);
};
self.changeCounterPrice = function (eventData) {
let eventName = eventData.type + CHANGED_EVENT_SUFFIX;
$scope.$broadcast(eventName, eventData);
};
self.showWithdrawAddress = function () {
$scope.$parent.showWithdrawAddress = true;
}
}
}
export default exchangeWidgetComponenet;
`CointInputDirective`
'use strict';
import cointInputTpl from './coininput.html';
import _ from 'lodash/core';
function coinInputComponenet($log) {
'ngInject';
var directive = {
restrict: 'E',
templateUrl: cointInputTpl,
controller: coinInputController,
controllerAs: 'vm',
bindToController: true,
scope: {
amount: '@',
type: '@',
selectedCoin: '@',
showWithdrawAddress: '@',
postSelect: '=',
changeCounterPrice: '='
}
};
return directive;
function coinInputController ($scope, $element, $attrs,
Price, AMOUNT_CHANGE_DEBOUNCE,
CHANGED_EVENT_SUFFIX) {
'ngInject';
let self = this;
let hideCounterEvent = 'reset' + this.type;
// TODO: refactor to configs
let counterChangedEvent = this.type === 'deposit' ? 'receive' +
CHANGED_EVENT_SUFFIX : 'deposit' + CHANGED_EVENT_SUFFIX;
$log.debug('Hello from coinInput controller!');
self.icons = [
{name: 'BTC'},
{name: 'LTC'},
{name: 'ETH'}
];
self.select = function (coinName) {
let prevCoin = self.selectedCoin;
self.selectedCoin = coinName;
self.postSelect(coinName, prevCoin, self.type);
$scope.$broadcast('reset')
};
$scope.$on(hideCounterEvent, function(event, eventData) {
if (eventData.newCoin === this.selectedCoin) {
self.select(eventData.prevCoin);
}
});
$scope.$watch('amount', function(newAmount, oldAmount) {
let eventData = {
newAmount: newAmount,
oldAmount: oldAmount,
coin: self.selectedCoin,
type: self.type
};
self.changeCounterPrice(eventData)
});
$scope.$on(counterChangedEvent, function (event, eventData) {
_.debounce(function () {
let pair = self.type === 'deposit' ? self.selectedCoin.
toUpperCase() + eventData.coin.toUpperCase() :
eventData.coin.toUpperCase() + self.selectedCoin.toUpperCase
();
Price.all(pair).all('latest').getList().then(function (priceList
) {
let basePrice = priceList[0].ask;
$scope.amount = eventData.newAmount * basePrice;
});
}, AMOUNT_CHANGE_DEBOUNCE);
});
}
}
export default coinInputComponenet;
`CoinDirective`
'use strict';
import coinTpl from './coin.html';
function coinComponent($log) {
'ngInject';
var directive = {
restrict: 'E',
templateUrl: coinTpl,
controller: coinController,
controllerAs: 'vm',
bindToController: true,
scope: {
selected: '@',
expanded: '@',
name: '@',
iconSrc: '@',
iconClass: '@',
select: '='
}
};
return directive;
function coinController ($scope) {
'ngInject';
// TODO: migrate to conf
let self = this;
this.selectCurrent = function () {
self.select(self.name);
self.selected = true;
};
$scope.$on('reset', function() {
self.selected = false;
});
}
}
export default coinComponent;
The error I get is:
TypeError: self.changeCounterPrice is not a function
at coininput.directive.js:68
at Scope.$digest (angular.js:18210)
at Scope.$apply (angular.js:18480)
at bootstrapApply (angular.js:1952)
at Object.invoke (angular.js:5040)
at doBootstrap (angular.js:1950)
at bootstrap (angular.js:1970)
at Object.angular.bootstrap (ocLazyLoad.js:760)
at HTMLDocument.<anonymous> (index.bootstrap.js:18)
at mightThrow (jquery.js:3583)
(The same for `postSelect`)
Stack trace:
(anonymous) @ angular.js:14642
(anonymous) @ angular.js:11102
$digest @ angular.js:18228
$apply @ angular.js:18480
bootstrapApply @ angular.js:1952
invoke @ angular.js:5040
doBootstrap @ angular.js:1950
bootstrap @ angular.js:1970
angular.bootstrap @ ocLazyLoad.js:760
(anonymous) @ index.bootstrap.js:18
mightThrow @ jquery.js:3583
process @ jquery.js:3651
setTimeout (async)
(anonymous) @ jquery.js:3689
fire @ jquery.js:3317
fireWith @ jquery.js:3447
fire @ jquery.js:3455
fire @ jquery.js:3317
fireWith @ jquery.js:3447
ready @ jquery.js:3920
completed @ jquery.js:3930
What is super weird, is that for `select` works just fine! (two way bound
function, by reference from the isolated scope of `coinInputDirective` to
`coinDirective`)
Link to StackOverflow:
https://stackoverflow.com/questions/45662223/angular-cannot-pass-function-by-reference-into-an-isolated-scope-several-nested
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
