Is there a loosly coupled way to update a parent directive from a dynamically created view/controller that is a child of the parent

Question

In my app I have window instances. The app can contain multiple windows and windows can contain multiple views. The views are children of each window instance. The windows and view creator are directive with an isolated scope. I want the views to be loosely coupled to their parent window and not have to something like $scope.$parent

module.directive('window', function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'windowTemplate.html',
        controller: 'windowController',
        scope: {
            config: '='
        },
        link: function(scope, element, attrs) {

        }
    };
});

module.directive('view', function($compile, $http) {
    return {
        restrict: 'E',
        replace: true,
        scope: {},
        link: function(scope, element, attrs) { 
            attrs.$observe('templateUrl', function (url) {
                $http.get(url).then(function (response) {
                    var tpl = $compile(response.data)(scope);
                    element.append(tpl);
                });
            });
        }
    };
});

I initially thought that I could achieve this with a service, but being that services are singletons, the view would update all windows.

Is there a way to achieve what I'm trying to do?

Example Plunker

Answer 1

If you want to share data/functions between locations in angular I would suggest reading up on services: https://docs.angularjs.org/guide/services

They allow you to have different parts of your app communicate with one another.

Answer 2

As I attempted to demonstrate in this answer, despite the fact that services are singletons, there are easy ways to utilize them for managing multiple, unique object instances.

I think that the real problem you're wrestling with is how to relate a "window" and a "view". It sounds like you have an aversion to utilizing prototypical inheritance for fear of too tightly coupling the elements. Still, one way or another, you're going to have to have some coupling between view and window. Otherwise, they are just independent objects with no relationship to one another.

I suggest that you consider creating a service which is, in part, a factory of window and view objects (ie. similar to my answer to your previous question). Then, since you are using directives with isolate scope, you can share just the window scope object with child views, like so (in your window directive template):

<view template-url="{{view.templateUrl}}" window="window" ng-show="view.active"></view>

If you make the corresponding scope: {...} change to all child view directives, they will have access only to the parent's scope variable for window. And honestly, in that case, you might even skip making the service, since the window and view directive's could themselves sufficiently encapsulate. Whether or not you need the service will probably depend on other factors outside of the scope of what you've presented for discussion.

If you see an issue with sharing only that scope variable, can you update your question with more information on what your objections are?