Why is the functionality not working as expected?
index.html
<div ng-controller="mainController">
<sun external-fct="changeValue(internalValue)"></sun>
</div>
controllers.js
controllers.controller('mainController', ['$scope', function ($scope) {
$scope.changeValue = function (newValue) {
$scope.value = newValue;
}
$scope.$watch('value', function (n, o) {
if (n !== o)
alert('the value has changed to ' + n);
});
}]);
directives.js
directives.directive('sun', function () { return {
scope: {
fct: '&externalFct'
},
template: '<button>click me</button>',
link: function (scope, element, attrs) {
element.on('click', function (e) {
scope.fct({
internalValue : 'test'
})
});
}
}});
Upon clicking the <button>, it seems that the directive's external scope does not properly track the changes in the value!