Cara yang tepat untuk menambahkan atribut ke tag HTML halaman Joomla?

11

Saya menggunakan AngularJS untuk menambahkan beberapa fungsionalitas yang lebih maju ke beberapa halaman artikel Joomla saya. Pada halaman ini saya perlu menambahkan atribut ng-app ke <HTML>tag di halaman saya. Saat ini tag HTML normal untuk halaman Joomla (v3.3) saya terlihat seperti ini;

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

dan saya perlu terlihat seperti ini;

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

Ini perlu sedikit dinamis karena halaman yang berbeda mungkin memerlukan arahan aplikasi-ng yang berbeda. Apakah ada cara yang tepat untuk melakukan ini di Joomla?

Saat ini saya mengimpor AngularJS menggunakan yang berikut:

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

Terima kasih atas bantuan yang dapat Anda berikan.

joomla-api drobertson
sumber
Bagaimana Anda saat ini menambahkan AngularJS dan semacamnya hanya untuk halaman-halaman itu?
David Fritsch
Saya menambahkan AngularJS ke halaman-halaman dengan blok kode PHP sederhana. Ini kode yang digunakan; <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
Maaf untuk kode yang rusak. Saya tidak tahu bagaimana cara mendapatkan blok kode agar terlihat benar dalam 5 menit saya harus mengeditnya.
drobertson
@DougRobertson - Anda hanya dapat memperbarui pertanyaan Anda untuk kode diperbarui;) Saya telah mengedit pertanyaan Anda sesuai
Lodder

Jawaban:

5

Anda dapat membuat systemplugin seperti ini:

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());
    }
}
Farahmand
sumber
Terima kasih, ini yang saya cari. Saya akan bekerja pada plugin sistem. Dalam jangka pendek, mungkinkah melakukan hal yang sama dari PHP yang tertanam di dalam artikel itu sendiri?
drobertson
DOMDocument sangat sensitif terhadap struktur Html. Jika gagal memuat dokumen, itu gagal secara besar-besaran dan tidak ada cara untuk memulihkan kesalahan Html kecil. Saya lebih suka preg_replace lurus .
Anibal
@DougRobertson AFAIK, tidak itu tidak mungkin. BTW Saya tidak terbiasa dengan AngularJS, tetapi jika atribut digunakan di sisi klien, Anda dapat mendefinisikannya di sisi klien juga. Contoh jQuery:$('html').attr('ng-app', 'dataManager');
Farahmand
@Fari Saya mempertimbangkan untuk melakukan itu, tetapi urutan beban menjadi rumit. Jika saya dapat mengontrol penempatan attr sehingga secara khusus terjadi sebelum AngularJS diinisialisasi maka ide Anda mungkin bagus. Sejauh ini saya belum sampai sejauh itu di lubang kelinci.
drobertson
1

Anda dapat menggunakan PHP untuk menambahkan konten dinamis ke ng-appatribut.

Di \templates\yourtemplate\index.phpfile Anda , ubah

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

untuk

<?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 ?>">
johanpw
sumber
Dengan menggunakan pendekatan ini saya perlu memodifikasi template induk untuk setiap halaman yang ingin saya tambahkan. Ini akan berhasil, tetapi sangat sulit karena saya menambahkan lebih banyak halaman dan ng-app. Saya mencari lebih banyak cara untuk menambahkan atribut yang mirip dengan bagaimana kita memasukkan referensi skrip ke perpustakaan javascript. Apakah ada cara untuk melakukan ini?
drobertson
1
mungkin plugin sistem akan menjadi cara termudah. Itu dapat memanipulasi html yang diberikan tepat sebelum menyajikannya kepada klien, dan memiliki semua data sesi yang tersedia untuk menentukan atribut mana yang sesuai untuk Anda.
Riccardo Zorn