Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to bind content of tag into into directive's scope?

Say I have a directive like such:

<my-directive>This is my entry!</my-directive>

How can I bind the content of the element into my directive's 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) {
        }
    };
});
like image 885
John Avatar asked Nov 20 '25 22:11

John


1 Answers

I think there's much simpler solution to the ones already given. As far as I understand, you want to bind contents of an element to scope during initialization of directive.

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.

like image 105
package Avatar answered Nov 24 '25 06:11

package