0

ページに 3 つの個別の parsys インスタンスがある Adob​​e CQ 5.6 のページがあります。これらのそれぞれに、Ajax 呼び出しによって HTML のセクションが追加されたコンポーネントが追加されています。私の最終的な目標は、AngularJS のサブページ ナビゲーションを設定して、編集者が引き続きアクセスできるようにすることです。

私が問題に直面しているのは、これらの Ajax セクションが、parsys インスタンスを含む CQ 内からページをプルしていることです。ただし、Ajax を介して追加されたこれらのインスタンスは、parsys セクションの HTML マークアップを適切に追加しているにもかかわらず、オーサリング環境で初期化されていません。また、Ajax セクションが jcr:content 子ノードを持つ新しいコンテンツ ノード (/content の下) を作成していることも確認しました。

私がする必要があるのは、ページ上のparsysセクションを交換する各Ajax呼び出しの後にサイドキックを再初期化するためにいくつかのjavascriptコマンドを呼び出すことです。どのJavaScript関数を呼び出すかわかりません。

誰かがこの機能が何であるかを知っていますか、それとも私は完全にベースから外れていますか?

mainmoduel.jap ファイルと shoes.jsp ファイルのコードを次に示します。最後の angular.bootstrap は、ページ上の複数の兄弟モジュールを処理するために必要です。Ajax を使用しない場合、これらはすべて機能します。

<%-- angularmainpage-simple.jsp --%>
<%@include file="/libs/foundation/global.jsp"%><%
%><%@page session="false" %><%
%><%
    // TODO add you code here
%><cq:include script="head.jsp" />
<cq:includeClientLib categories="angulardemo.all"/>

<div data-ng-app class="page-content bodyWidth" id="mainPageContainer">
    body
    <div class="row-fluid"><%-- row-fluid here will enlarge the width to 100% --%>
        <div class="span12">
            <cq:include path="grid-12-par" resourceType="foundation/components/parsys" />
        </div>
    </div>
    <div class="row-fluid">
        <div class="span8">
            <cq:include path="grid-8-par" resourceType="foundation/components/parsys" />
        </div>
        <div class="span4">
            <cq:include path="grid-4-par" resourceType="foundation/components/parsys" />
        </div>
    </div>
</div>

と：

<%-- shoes.jsp --%>
<%@include file="/libs/foundation/global.jsp"%>
    <div id="shoesComponent" class="angularComponent">
    <div data-ng-controller="shoesController">
        <h4>Name: {{name}}</h4>
        <div data-ng-view>
        </div>
        <h5>Sub-Parsys:</h5>
        <div>
            <cq:include path="shoes-par" resourceType="foundation/components/parsys" />
        </div>
        <ul class="nav nav-list" navlist>
            <li class="nav-header">{{name}} pages:</li>
            <li class="active" ng-click="setActive($event)">
                <a href="#/route1">Route 1</a>
            </li>
            <li ng-click="setActive($event)">
                <a href="#/route2">Route 2</a>
            </li>
        </ul>
    </div>
</div>

<script type="text/javascript">
function shoesController ($scope) {
$scope.name = "Shoes Module";
}
var shoesModule = angular.module('shoesMod', []).
config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/route1', {templateUrl: 'home/shoes/route1.html', controller: shoesController}).
        when('/route2', {templateUrl: 'home/shoes/route2.html', controller: shoesController}).
        otherwise({redirectTo: '/route1'});
}]);

angular.bootstrap(document.getElementById('shoesComponent'), ['shoesMod']);
</script>

ルートは次のとおりです。

<%-- partial.jsp --%>
<%@include file="/libs/foundation/global.jsp"%><%
%><%@page session="false" %><%
%><%
    // TODO add you code here
%><div>Partial Parsys for CQ Resource "<%=currentPage.getTitle() %>"</div>
<div>Need to call some script here to initialize the parsys component below.</div>
<div><cq:include path="partial-par" resourceType="foundation/components/parsys" /></div>
4

1 に答える 1