After spending countless hours and trying almost everything, I can't seem to get it to work...
I have an Angular directive that calls another Angular directive. I need to handle events in the child directive. So my child directive looks like:
restrict: 'E',
replace: true,
scope: {
testResult: "=",
And in the parent directive I have:
<my-search-directive test-result="newTest"></my-search-directive>
To handle changes in testResult, in the parent directive I have this watch:
$scope.$watch('newTest', function (newVal, oldVal) {
alert('test ' + newVal + ' ' + oldVal);
}, true);
It only fires once in the beginning and newVal and oldVal are undefined... If I use a service instead of the 'master' directive, it works (passing parentScope and using it for watch).
Initially, newTest was returning a complex object and I thought that could be the problem, but it's not because it now works with a simple string as well.
I tried using $watchCollection, but it's also not working... I need this exact scenario - a directive within a directive - and I can't figure out how it can work?
EDIT 1 :
myApp.directive('parentDirective', [
"$log", function ($log) {
return {
scope: {
getQueriesUrl: "=",
isFullyQualified: "=",
isMainTabs: "=",
model: "=",
crudUrls: "=",
callBackFunction: "&",
callback: "&",
newTestResult: "@"
},
restrict: 'A',
replace: true,
controller: function ($scope)
{
myActions.push('<div><my-search-directive test-result="newTestResult"></my-search-directive></div>');
}
That is my 'parent directive', so I need to track changes of test-result. As @Walfrat mentioned, I added the newTestResult variable, but it still doesn't work...