CODEWITHSUNDEEP
angularjsangularjs-directive
user1851359
user1851359

Reputation: 139

Angular: How to get content from a custom div

I want to get a the content from a custom div tag, I tried various ways to do it, not working well. Here is an example. The general item is to retrieve the content in the custom directive tags. and then bind them into the template. I hope some one can give me a suggestion or solution that does it, or does similar things

The html

 <questions>
      <qTitle> this is title</q-title>
       <qContent> this is content <q-content>
 </questions>

The angular js

 var app = angular.module('app'[]); 
 app.directive('questions', function () {
     return {
     transclude: true;
     template: "<div class='someCSSForTitle'>{{qTitle}}</div>"+
               "<div class='someCSSForContent'>{{qContent}}</div>"
     link:(scope, element, attrs)
        scope.qTitle = element.find(qTitle).innerHTML
        scope.qContent = element.find(qContent).innerHTML
   }

}

});

Upvotes: 2

Views: 9566

Answers (1)

Eduard Gamonal
Eduard Gamonal

Reputation: 8031

First I'd advise you to read the AngularJS Guide. You didn't even copy-paste the structure correctly and you have javascript and even html errors.

Basic fixes:

HTML 

<questions>
    <q-title>this is title</q-title>
    <q-content>this is content</q-content>
</questions>

Why do you mix qTitle and q-title? As regarding JS:

app.directive('questions', function () {
    return {
        restrict: 'E',
        replace: true,
        template: "<div class='question'>{{title}}</div>", /* simplified */
        link: function(scope, element, attrs) {
            scope.title = "hallo";
            console.log(element.html());
        }        
    };
});

by default, restrict is set to 'A'. That means attributes. Your syntax is for elements. replace set to true is not compulsory. However, because the browser doesn't understand your elements but does understand the content ("this is title"), it will print it. the link function has to be a function. you had syntax errors there (same for transclude: you had something that you were not using followed by ";")

You can print the element to know the contents. If you do, you'll see that element in link is not question.

Now if you want to read the content, you can use a transclude function or create directives for each part and create the template separately. This seems simpler. Live example:

app.directive('questions', function () {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        template: "<div class='question' ng-transclude></div>",      
    };
});


app.directive('qTitle', function () {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        template: "<div class='title' ng-transclude></div>",      
    };
});

In this case you translude the contents to an inner div. You can also define custom complex transclude functions in the compile phase but this doesn't seem necessary here.

Upvotes: 8

Related Questions