angularjs how to use service $scope variable in another function

Question

In my angularjs html file, i am reading a file data using a service and showing data in directive. It is working fine in displaying treeview. I have put a ng-click "ShowDetailsFunc()" for each item and want to get details from the variable ($scope.testdata). The problem is the data which i am getting from service is not accessible from ng-click function and shows as "undefined". i understand that $scope.testdata takes some time to get value as it comes from $http service but i am also trying to get once it is fully loaded. As far i understand once $scope variable is set, should be accessible in entire controller function and can be accessed anywhere.

I thought of using $watch but I think it is used for watching a normal variable. please help if my understand is not right or i am making some mistake somewhere.

My directive as below,

mainApp.directive('collection', function () {       
    return {
        restrict: "E",
        replace: true,
        scope: {collection: '='},       
        template: "<ul><member ng-repeat='member in collection' member='member'></member></ul>"         
    }
})

mainApp.directive('member', function ($compile) {
    var NewChild = "<li><span ng-click=ShowDetailsFunc()>{{member.NodeName}}</span></li>";      
    var linkerfunc = function(scope, element, attrs) {  
                    var collectionSt = '<collection collection="member.children"></collection>';
                    $compile(collectionSt)(scope, function(cloned, scope)   {                                           
                        element.append(cloned); 
                     });
                    scope.ShowDetailsFunc = function() {                        
                        scope.ShowDetailsCtrlFunc(element,event);                     
                    } 

    }
    return {
        restrict: "E",
        replace: true,
        scope: {member: '=', ShowDetailsCtrlFunc : '&'},
        template: NewChild,     
        controller: 'TreeController',
        link: linkerfunc        
    }
})

And my controller function,

mainApp.controller('TreeController', function ($scope,$http,getTestDataService,$timeout) {      
    $scope.Intialfunc = function() { 
        $scope.testdata = []
        var filename = 'D:\\myxmlfile.xml'      
            getTestDataService.gettestdata(filename).then(function success(response){
                $(response.data.children).each(function(index,value){
                $scope.testdata.push(value);            
                })
            console.log($scope.testdata) // showing data here.
            });         
        }   
    $scope.ShowDetailsCtrlFunc = function(element,event) {
            console.log("in function ShowDetailsCtrlFunc"); // coming to this fucntion on click.        
            console.log($scope.testdata) // but this one is not showing . shows undefined.
            .....................................
            some other code using $scope.testdata
            .....................................

            event.stopImmediatePropagation();           
      };
});

madhur · Accepted Answer · 2018-01-21 08:49:49Z

0

By default angular would not bind this of directive to the controller, to achieve this you should use bindToController property in return statement of directive. For more details check this

answered Jan 21, 2018 at 8:49

madhur

1,0111 gold badge15 silver badges23 bronze badges

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

1 Comment

usersam Over a year ago

I read the blog but couldn't get an idea how to use bindToController with directive function. could you please explain.

Collectives™ on Stack Overflow

angularjs how to use service $scope variable in another function

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