If you want to display the value you sent inside the directive, just add the ng-transclude
directive to the element in which you want to copy the interpolated value of the expression toBind
.
app.directive('foobar', [function() {
return {
restrict: 'E',
transclude: true,
replace: true,
template: '<div ng-transclude></div>',
link: ...
}
}])
Usage:
<foobar>{{someValueFromScope}}</foobar>
Result:
<div>someValueFromScope</div>
EDIT:
If I understood your problem now, you could do something like this:
<template-type content="additionalField" option="toBind"></template-type>
In directive:
var inputNote='<div><input type="text" ng-model="option"/></div>';
scope: {
content: '=',
option: '@'
}
Now when you change the content of the input it will be reflected in the option
variable.
EDIT 2:
I got a working example: jsfiddle
I also corrected the code in the previous edit.
EDIT 3:
When you change the value of options
, the directive broadcasts an event optionsValueChanged
to its parent scope (which happens to be the scope of the controller). The scope reacts to this event by updating the value of data.anotherValue
. But it's not really the way these things should be handled, if you really need to use a value in more than one place then it's better to use a provider
(value
or service
). It's not really relevant/useful to your question.