Is it possible to render value of $scope.something inside script?

Question

I'm really new in Web development, So sorry if it's only a little misunderstanding and very miner things.

I'm trying to use this bootstrap-treeview, and component will bind to this existing DOM element,

<div id="tree"></div>

With the basic usage like this,

function getTree() {
  // Some data
  return data;
}    
$('#tree').treeview({data: getTree()});

Now, I want to set treeview using angularJS, So that I tried setting ng-model to that div element and assigned data from the $scope object like $scope.myData = myData;. But it didn't work.

It will be fine if I could possibly mix up the same as given in the description of the library, and retrieve the value of $scope object inside <script> section like this

<script>
    var data = //how to Recieve $scope.myData here
    $('#tree').treeview({ data: getTree() });
</script>

Is it possible to get the value of $scope.myData inside <script>? Or any kind of suggestions to accomplish my task, or even duplication will be greatly appreciated if there is something similar.

I am sorry because I'm really new in these angularJS and other stuffs like Jquery.

you can wrap the treeview library in your own angular directive, but it is better and easier to find an Angular library that does the same thing, i.e. https://github.com/Gillardo/bootstrap-ui-treeview — sdfacre, Apr 04 '16 at 06:43
@ImantsVolkovs It's inside one of the controller of angular as the variable tree of the link provided above. — Shree Krishna, Apr 04 '16 at 06:44

Chrillewoodz · Accepted Answer · 2016-04-04T08:56:35.920

1

To accomplish what you want you should create an AngularJS directive and wrap the initiation of bootstrap-treeview inside it. Something like this:

myModule.directive('treeView', [function() {

        return {
                restrict: 'A',
                scope: {
                    myData: '='
                },
                link: function(scope, element, attrs) {

                    var data = scope.myData;

                    $('#tree').treeview({data: data});
                }
        };
}]);

Then use it like this:

<div id="tree" tree-view my-data="myData"></div>

edited Apr 04 '16 at 08:56

answered Apr 04 '16 at 06:44

Chrillewoodz

27,055
21
92
175

Thank u for your quick answer, But I'm still confused. Where should I put that data ? After the `myData : //here` ? And how to get it in the page ? – Shree Krishna Apr 04 '16 at 06:56
@ShreeKrishna What does the getTree() do? – Chrillewoodz Apr 04 '16 at 07:10
It is a function which returns data. There is complete explanation with example as well in the link above. I don't know jquery as well :(. – Shree Krishna Apr 04 '16 at 07:12
How about `treeview({data: data})`? – Chrillewoodz Apr 04 '16 at 07:20
means ? where is it ?.. Will you give me some suggestions about how to do this task from angularjs. Suppose I have that data in my angular module and I want to pass that data to `
`. What way will you prefer if you were supposed for this task. please Provide some hints, and I'll accept this answer. Will you please. – Shree Krishna Apr 04 '16 at 08:25
I found this really complex bro, I'm sure I cant resolve these as well if something happened in future. I've decided to use another [way](https://github.com/dump247/angular.tree) Thank you very much for your effort and precious time.. – Shree Krishna Apr 04 '16 at 09:46
1

I'd take the time to fully understand javascript before attempting to work with AngularJS and jQuery. It will help you in the future. – Chrillewoodz Apr 04 '16 at 09:55

Is it possible to render value of $scope.something inside script?

1 Answers1