Recently delving into Angular development, I can sense there's a piece of the puzzle that I haven't quite grasped yet. I stumbled upon an article discussing isolated scopes and the use of the & symbol for expressions.
You can find the article here, complete with a fiddle to play around with.
My goal is to incorporate a function without having to rely on a button click for triggering it. I modified the code in the fiddle to reflect my idea, but unfortunately, the function doesn't seem to execute as expected.
Uncommenting line #12 displays 'Hello', while commenting it out should display 'as' in the textbox. However, instead of this, the text gets cleared. What could I be overlooking?
Many thanks,
PS. I'm having trouble making the snippet work, whereas the fiddle runs smoothly.
var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
return {
restrict: 'E',
scope: {
isolatedExpressionFoo: '&'
}
};
})
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.foo = 'Hello!';
//$scope.isolatedExpressionFoo();
$scope.updateFoo = function () {
$scope.foo = 'as';
}
}]);<div ng-controller="MyCtrl">
<input ng-model="foo">
<my-component isolated-expression-foo="updateFoo()" />
</div>