I am working on an app that includes window instances. These instances can have multiple windows and each window can contain multiple views. The views are considered as children of each window instance. Both the windows and view creator are directives with an isolated scope. My goal is to have the views loosely connected to their parent windows without having to use 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);
});
});
}
};
});
Initially, I considered using a service for this purpose, but since services are singletons, it would cause the view to update all windows simultaneously.
Is there a method to accomplish what I am attempting to do?
See the Plunker for an example.