javascript - オブジェクトをインスタンス化して、複数のディレクティブで共有できるようにする

Question

私がやっていること: 2 つの属性ディレクティブを作成しています。1 つは要素を左に移動し、もう 1 つは要素をページの中央に移動します。以下のコードを参照してください。これらの css プロパティを設定するために操作していることに注意してくださいng-style(要素を左に移動し、ページの中央に配置します)。

問題:要素で両方のディレクティブ
を使用すると、明らかに2 番目のディレクティブが最初のディレクティブを上書きします。これは、両方の/attributes を同時に 適用できないことを意味します。scope.style={}
ng-style

私の質問:オブジェクトを再作成せずに両方のディレクティブで使用できるように、オブジェクト
をインスタンス化する簡単な方法は何ですか?scope.style

面倒なコードを大量に書くことなく、複数の要素ディレクティブに対して簡単にスケーリングできるシンプルなソリューションを見つけようとしています。(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'
    };
}]);