Display data in UI from link function angularJs

Question

I have to assigned a value to a $scope variable inside link function and this value has to be displayed in the UI.But, I am not able to display it on UI.

My code is as follows:

UI:

<div> {{articleContent}}</div>

Link function:

app.directive('member', function($compile,$http,getTocService) {
    return {
        restrict: "A",
        replace: true,
        scope: {
            member: '=',
            articleData: '=',
            articleContent: '=',
            articleDetails: '='
        },
        template: "<div><li ng-if='member.title'><a href='#' ng-click='getContent(member.itemId)'>{{member.title}}</a></li></div>",
    link: function(scope, element, attrs) {
                scope.getContent = function(itemId) {
                    getTocService.getArtData(itemId, function(data){
                        var articleDetails = data.data.getArticleResponse.articleDetail.articleContent;
    scope.$parent.articleContent = articleDetails;

                        alert(articleDetails);
                    });
                }
    }
});

Controller:

app.controller('apdController', function($scope, getTocService,$location) {
    var bookId = $location.search().id;
    var sampdata = getTocService.getToc(bookId);
    $scope.tasks =sampdata;
    $scope.articleContent = '';

});

I want to display articleContent variable's data . Can someone help me please..

is id="articleContent" is a view of directive or your main html? — Abhilash Augustine
– Abhilash Augustine, Commented Jan 7, 2016 at 9:24
That is main html. I just used it as I was trying to do something with javascript. no need of id there.. — Sanjay
– Sanjay, Commented Jan 7, 2016 at 9:32
so basically you want to display directive's scope variable in your main html. right? — Abhilash Augustine
– Abhilash Augustine, Commented Jan 7, 2016 at 9:34

Abhilash Augustine · Accepted Answer · 2016-01-07 09:49:58Z

1

link: function(scope, element, attrs) {
      scope.getContent = function(itemId) {
      getTocService.getArtData(itemId, function(data){
            var articleDetails = data.data.getArticleResponse.articleDetail.articleContent;

            // Assign your's scope article content here
            scope.articleContent = articleDetails;
            alert(articleDetails);
      });
}

And your html should be look like this,

<member member="myMember" article-data="myData" article-content="articleContent"> </member>
<div> {{articleContent.content}}</div>

edited Jan 7, 2016 at 9:49

answered Jan 7, 2016 at 9:38

Abhilash Augustine

4,2081 gold badge26 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sanjay Over a year ago

Its not displaying data on UI. no error on browser console too. Do I need to make any change in controller or html?

Collectives™ on Stack Overflow

Display data in UI from link function angularJs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related