How do I associate the content of a tag with a scope?
Let's say I have a directive like this:
<my-directive>This is my entry!</my-directive>
How do I bind the content of an element to my directive scope?
myApp.directive('myDirective', function () {
return {
scope : {
entry : "" //what goes here to bind "This is my entry" to scope.entry?
},
restrict: "E",
template: "<textarea>{{entry}}</textarea>"
link: function (scope, elm, attr) {
}
};
});
source to share
I think a much simpler solution has already been provided. From what I understand, you want to bind the content of the element to the scope during directive initialization.
Given this html:
<textarea bind-content ng-model="entry">This is my entry!</textarea>
Define bind-content
as follows:
directive('bindContent', function() {
return {
require: 'ngModel',
link: function ($scope, $element, $attrs, ngModelCtrl) {
ngModelCtrl.$setViewValue($element.text());
}
}
})
Here's a demo .
source to share
You need to add the template config to your directive.
myApp.directive('myDirective', function () {
return {
scope : {
entry : "=" //what goes here to bind "This is my entry" to scope.entry?
},
template: "<div>{{ entry }}</div>", //**YOU DIDN'T HAVE A TEMPLATE**
restrict: "E",
link: function (scope, elm, attr) {
//You don't need to do anything here yet
}
};
});
myApp.controller('fooController', function($scope){
$scope.foo = "BLAH BLAH BLAH!";
});
And then use your directive like this:
<div ng-controller="fooController">
<!-- sets directive "entry" to "foo" from parent scope-->
<my-directive entry="foo"></my-directive>
</div>
And angular will turn this into:
<div>THIS IS MY ENTRY</div>
Let's assume you have angular configured correctly and include this JS file in your page.
EDIT
It sounds like you want to do something like the following:
<my-directive="foo"></my-directive>
This is not possible with the ELEMENT directives. This is, however, with attribute directives. Check the following.
myApp.directive('myDirective', function () {
return {
template: "<div>{{ entry }}</div>", //**YOU DIDN'T HAVE A TEMPLATE**
restrict: "A",
scope : {
entry : "=myDirective" //what goes here to bind "This is my entry" to scope.entry?
},
link: function (scope, elm, attr) {
//You don't need to do anything here yet
}
};
});
Then use it like this:
<div my-directive="foo"></div>
This will mean the value passed to the my directive to the entry scope variable . Unfortunately, there is no way to do this with a constrained member directive. What's stopping this is not Angular, it is the html5 guidelines that do what you want to make impossible. You will need to use an attribute directive instead of an element directive.
source to share
I may have found a solution. It relies on the directive transexclusion feature. It works, but I need to better understand transclusion before making sure it's the right way.
myApp.directive('myDirective', function() {
return {
scope: {
},
restrict: 'E',
replace: false,
template: '<form>' +
'<textarea ng-model="entry"></textarea>' +
'<button ng-click="submit()">Submit</button>' +
'</form>',
transclude : true,
compile : function(element,attr,transclude){
return function (scope, iElement, iAttrs) {
transclude(scope, function(originalElement){
scope.entry = originalElement.text(); // this is where you have reference to the original element.
});
scope.submit = function(){
console.log('update entry');
}
}
}
};
});
source to share