0

HTML

<div class="block-area" id="basic" ng-controller="DocumentEditorController">
    <docs-hierarchy table-of-contents="document.toc" document-id="123123123">
    </docs-hierarchy>
</div>

Directive

.directive('docsHierarchy', [function() {
    return {
        restrict: 'E',
        scope: {
            tableOfContents: '=',
            documentId: '@',
        },
        template: '' +
            '<docs-hierarchy-tree-render tree="tree"></docs-hierarchy-tree-render>' +
            '',
        link: function($scope, elem, attrs) {
            $scope.meta = {};
            $scope.tree = {};

            function parseTree() {
                console.log("TOC", "$scope:", $scope);
                console.log("TOC", "$scope.tableOfContents:", $scope.tableOfContents);
                console.log("TOC", "$scope.tree:", $scope.tree);
                console.log("TOC", "$scope.documentId:", $scope.documentId);
            }

            parseTree();
        }

Result: enter image description here

Simply, I don't get how the value can be there in the $scope value output, and immediately be undefined the very next line. Why am I unable to get this value as already evaluated?

yet I can grab the string binding just fine.

EDIT 01

I managed to figure out a first pass way of doing this, like this:

.directive('docsHierarchy', [function() {
    return {
        restrict: 'E',
        scope: {
            tableOfContents: '=',
            documentId: '@',
        },
        template: '' +
            '<docs-hierarchy-tree-render tree="tree"></docs-hierarchy-tree-render>' +
            '',
        link: function($scope, elem, attrs) {
            $scope.meta = {};
            $scope.tree = {};

            function parseTree() {
                console.log($scope.toc);
            }

            $scope.$watch('tableOfContents', function(newVal, oldVal) {
                if(newVal !== oldVal) {
                    $scope.toc = newVal;
                    parseTree();
                }
            });
        }
    };
}])

I still don't get why I have to do this though, if tableOfContents is supposedly data bound

georgeawg
  • 48,608
  • 13
  • 72
  • 95
RedactedProfile
  • 2,748
  • 6
  • 32
  • 51
  • With the AngularJS framework, controllers are initialized before directives are linked. If the controller immediately initializes the data, it will be available in the directive. If the controller has to get the data from a server, the directive needs to watch for the data to arrive from the server. The [DEMO on PLNKR](https://plnkr.co/edit/VnMzuXyRy5ONHX5xqmvZ?p=preview). – georgeawg Feb 13 '20 at 23:54
  • @georgeawg hi I understand that, but as you can see in the image attached under "Result" the data is definitely there when console logging $scope, but when I console log the hydrated property in the very next line, it's undefined. That's the part I don't get – RedactedProfile Feb 14 '20 at 04:38
  • That is a Developer Console artifact. The Developer Console saves an object reference and shows the contents at the time the user clicks the expand icon. It is not necessarily the contents of the object at the time the console.log was performed. – georgeawg Feb 14 '20 at 08:01
  • Damn, that is exactly what I was worried about. But I mean I've updated values before and they don't reflect in the console in previously logged output, what makes this different? Is there simply no way to turn that off? When I console log, I'm looking for a snapshot of the value as is, unchanging – RedactedProfile Feb 14 '20 at 16:25
  • You are getting a snapshot , a snapshot of the *reference*; not a snapshot of the *contents*. One solution is `console.log(JSON.stringify(the_object))`. There are other answers in the duplicates that I flagged. – georgeawg Feb 14 '20 at 17:27

0 Answers0