是否有松散耦合的方式从动态创建的视图/控制器更新父指令，该视图/控制器是父级的子级 [英] Is there a loosly coupled way to update a parent directive from a dynamically created view/controller that is a child of the parent

问题描述

在我的应用程序中，我有窗口实例.应用程序可以包含多个窗口，窗口可以包含多个视图.视图是每个窗口实例的子级.窗口和视图创建器是具有独立作用域的指令.我希望视图与它们的父窗口松散耦合，而不必像 $scope.$parent

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?

示例 Plunker

推荐答案

正如我试图在 这个答案，尽管服务是单例的，但有一些简单的方法可以利用它们来管理多个, 唯一的对象实例.

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>

如果您将相应的 scope: {...} 更改为所有子视图指令，它们将只能访问窗口的父级作用域变量.老实说，在这种情况下，您甚至可以跳过创建服务，因为 window 和 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?

这篇关于是否有松散耦合的方式从动态创建的视图/控制器更新父指令，该视图/控制器是父级的子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！