JoomlaページのHTMLタグに属性を追加する適切な方法?


11

AngularJSを使用して、いくつかのJoomla記事ページにさらに高度な機能を追加しています。これらのページで、ng-app属性を<HTML>ページのタグに追加する必要があります。現在、Joomla(v3.3)ページの通常のHTMLタグは次のようになっています。

<html prefix="og: http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb">

このように見えるようにする必要があります。

<html prefix="og: http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" ng-app="dataManager">

ページによって異なるng-appディレクティブが必要になる場合があるため、これは少し動的である必要があります。Joomlaでこれを行う適切な方法はありますか?

現在、AngularJSを以下を使用してインポートしています。

<?php 
    $document = JFactory::getDocument();
    $urlAngular = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js";
    $document->addScript($urlAngular); 
?>

あなたが与えることができるあらゆる助けをありがとう。


現在、これらのページだけにAngularJSなどをどのように追加していますか?
David Fritsch 2014

PHPコードの単純なブロックを使用して、AngularJSをこれらのページに追加しています。これが使用されるコードです。<pre> {source} <?php $ document = JFactory :: getDocument(); $ urlAngular = " ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js "; $ document-> addScript($ urlAngular); ?> {/ source} </ pre>
drobertson、2014

壊れたコードでごめんなさい。コードブロックを編集する必要のある5分で正しく見せる方法がわかりませんでした。
ドロバートソン2014

@DougRobertson-更新されたコードの質問を更新できます;)私はそれに応じて質問を編集しました
Lodder

回答:


5

次のsystemようなプラグインを作成できます。

class plgSystemAddAttr extends JPlugin
{
    public function onAfterRender()
    {
        $document = JFactory::getApplication();
        $htmlString = $document->getBody();

        $dom = new DOMDocument();
        libxml_use_internal_errors(true);
        $dom->loadHTML($htmlString);
        libxml_use_internal_errors(false);
        $htmlTag = $dom->getElementsByTagName('html')->item(0);

        $domAttribute = $dom->createAttribute('ng-app');
        $domAttribute->value = 'dataManager';
        $htmlTag->appendChild($domAttribute);

        $document->setBody($dom->saveHtml());
    }
}

ありがとう、これは私が探していたものです。システムプラグインで作業します。短期的には、記事自体に埋め込まれたPHPから同じことを行うことができますか?
ドロバートソン2014

DOMDocumentはHtml構造に非常に敏感です。ドキュメントの読み込みに失敗した場合は、大きな失敗となり、軽度のHTMLエラーを回復する方法はありません。私はまっすぐなpreg_replaceを好みます。
アニバル2014

@DougRobertson AFAIK、それは不可能ではありません。ところで、AngularJSについてはよく知りませんが、クライアント側で属性を使用する場合は、クライアント側でも定義できます。jQueryの例:$('html').attr('ng-app', 'dataManager');
Farahmand 2014

@Fari私はそうすることを考えましたが、ロードのシーケンスはトリッキーになりました。attrの配置を制御して、AngularJSが初期化される前に具体的に発生するようにできれば、あなたのアイデアは素晴らしいものになるでしょう。これまでのところ、私はウサギの穴のはるか下まで来ていません。
ドロバートソン2014

1

PHPを使用して、動的コンテンツをng-app属性に追加できます。

あなたには\templates\yourtemplate\index.php、ファイル、変更

<html prefix="og: http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" ng-app="dataManager">

<?php
if ( condition ) {
   $ngapp = "dataManager";
} else {
   $ngapp = "somethingElse";
}
?>
<html prefix="og: http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" ng-app="<?php echo $ngapp ?>">

このアプローチを使用して、追加したいすべてのページのマスターテンプレートを変更する必要があります。機能しますが、ページとng-appを追加するので、非常に扱いにくいです。JavaScriptライブラリへのスクリプト参照を挿入する方法と同様の属性を追加する方法をもっと探しています。これを行う方法はありますか?
ドロバートソン2014

1
おそらくシステムプラグインが最も簡単な方法でしょう。レンダリングされたhtmlをクライアントに提供する直前に操作し、すべてのセッションデータを利用して、どの属性が適切かを判断できます。
Riccardo Zorn、2014
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.