AngularJS - communication between directives not working properly

Question

I have the following html:

<div ng-controller="collapseController">
    <div><breadcrumb-visualiser breadcrumbs="breadcrumbs" /></div>

    <div id="partialViewContainer">
        <div id="personContainer" partial-view-loader view="person" parent="" breadcrumbs="breadcrumbs"></div>
    </div>
</div>

Template breadcrumb-visualiser

<div style="width: 100%; background-color: #eee">
    <div ng-repeat="breadcrumb in breadcrumbs">
        <span class="customBreadcrumb"><a ng-href="" ng-click="">{{breadcrumb}}</a></span>
    </div>    
</div>

partial-view-loader

Loads an MVC partial view into the containing div. The loading partial view will be able to add yet another (new) view to the screen, while hiding the previous screen.

As you may see by the above html, this directive shares the breadcrumbs binding, provided by the collapseController. The directive adds the latest breadcrumb (associated to the just loaded partial view) to the existing breadcrumb list like so:

$scope.AddBreadCrumb = function (breadcrumb) {
    $scope.breadcrumbs.push(breadcrumb);
}

That's a function in the directive controller.

The issue

The collapseController initialises breadcrumbs with this value ['A', 'B']. So breadcrumbs A and B are displayed right away.

The first load of partial-view-loader will add breadcrumb C, resulting in:

['A', 'B', 'C'].

As I click the button that causes a new view to be added, I will once again trigger partial-view-loader , but now for breadcrumb D.

The problem is that it does not seem to update the breadcrumb. There's no visual change. Internally though, changes have been done but incorrectly.

If I add logging to AddBreadCrumb like so:

$scope.AddBreadCrumb = function (breadcrumb) {
    console.log($scope.breadcrumbs);
    $scope.breadcrumbs.push(breadcrumb);
    console.log($scope.breadcrumbs);
}

I get the following output:

before: ['A', 'B']
- push -
after: ['A', 'B', 'D']

Question

How come the added breadcrumb 'C' isn't preserved, and why is the new breadcrumb list not displayed (even if it's incorrect)?

Answer 1

In response to Divya:

self.AddChildByDirective = function (viewIdentifier, parentViewIdentifier) {
    var html = '<div id="' + viewIdentifier + 'Container" fvl-partial-view-loader view="' + viewIdentifier + '" parent="' + parentViewIdentifier + '" breadcrumbs="breadcrumbs" /></div>';

    var target = $('#partialViewContainer');

    var linkFunc = $compile(html);
    var content = linkFunc($scope);
    target.append(content);

    chainedScreensService.CollapsePartialByIdentifier(parentViewIdentifier);
}

That builds, compiles and appends the directive code for the new screen (view and parent are different).

Extra info:

I've changed the scope of both directives to scope: false . The idea is to make sure I'm using the variables declared by the controller, not something in an isolated scope. Zero difference.

This is the current code of the directives:

breadcrumbVisualiser

angular.module('directives.api').directive("breadcrumbVisualiser", [
    function () {
        return {
            restrict: 'E',
            scope: false,
            templateUrl: 'Templates/Directives/BreadcrumbVisualiser.html',
            controller: function () {
            },
            link: function (scope, element, attrs) {
            }
        }
    }
]);

partialViewLoader

angular.module('directives.api').directive("partialViewLoader", [
    '$compile',
    'chainedScreensService',
    function (
        $compile,
        chainedScreensService) {
        return {
            restrict: 'A',
            scope: false,
            controller: ['$scope', function ($scope) {
            }],
            link: function (scope, element, attrs) {
               chainedScreensService.GetPartialView(scope.activeView).then(function (viewData) {
                    $.post(viewData.Url, function(view) {
                        var linkFunc = $compile(view);
                        var content = linkFunc(scope);
                        element.append(content);

                        scope.AddBreadCrumb(viewData.Subject);
                    });
                });
            }
        }
    }
]);

scope.AddBreadCrumb(viewData.Subject) is a function defined in the controller.