javascript - 实例化一个对象，以便它可以与多个指令共享

Question

我在做什么:我正在创建两个属性指令:一个将元素向左移动，另一个将元素置于页面中央。请参阅下面的代码。请注意，我正在操作 ng-style 来设置那些 css 属性(将元素向左移动，并在页面上居中)。

问题:
当我在一个元素上使用两个指令时，第二个指令的scope.style={}显然覆盖第一个。
这意味着我无法同时应用这两个 ng-style/attributes。

我的问题:
实例化 scope.style 对象以便我可以在两个指令中使用它而无需重新创建对象的简单方法是什么？

我正在尝试找到一个简单的解决方案，可以针对多个元素指令轻松扩展， 无需编写大量困惑的代码。 (我不想在每个指令中创建一个特殊的 Controller 来适应共享 scope.style 对象)。

请指教。非常感谢!

---

这是 html:
数据来自json文件，但这里不重要。

<!-- The Element: -->
<started-box center-page keepleft screen="screen[3]"></started-box>

<!-- The Template: -->
<div id="{{screen.id}}" ng-style="$parent.style">
    Some content goes here.
</div>

以下是 AngularJS 代码片段:

// Two Attribute directives:
app.directive("centerPage", function () {
    return function (scope, element, attrs) {
        var winW = window.innerWidth;
        var winH = window.innerHeight;
        var boxW = 370;
        var boxH = 385;

        scope.style = {};
        scope.style.left = (winW / 2) - (boxW / 2);
        scope.style.top = (winH / 2) - (boxH / 2);
    }
});
app.directive("keepleft", function () {
    return function (scope, element, attrs) {
        scope.style = {};
        scope.style.cursor = 'default';
        scope.style.transform = 'translateX(-60%)';
    }
});

// Directive for the template:
app.directive("startedBox", [function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            screen: '='
        },
        templateUrl: dir + 'templates/directives/started-box.html'
    };
}]);

Answer 1

创建样式服务并将其注入(inject)到两个指令中。服务非常适合在指令/ Controller 之间共享状态。