วิธีที่เหมาะสมในการเพิ่มคุณสมบัติให้กับแท็ก HTML ของหน้า Joomla?


11

ฉันใช้ AngularJS เพื่อเพิ่มฟังก์ชั่นขั้นสูงเพิ่มเติมให้กับหน้าบทความ Joomla หลายหน้าของฉัน ในหน้าเหล่านี้ฉันต้องเพิ่มแอตทริบิวต์ ng-app ไปยัง<HTML>แท็กในหน้าของฉัน ปัจจุบันแท็ก HTML ปกติสำหรับหน้า Joomla (v3.3) ของฉันมีลักษณะเช่นนี้

<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

ฉันกำลังเพิ่ม AngularJS ให้กับหน้าเว็บเหล่านั้นด้วยโค้ด PHP แบบง่าย ๆ นี่คือรหัสที่ใช้ <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

ขออภัยสำหรับรหัสที่จัดทำขึ้น ฉันไม่สามารถหาวิธีบล็อกโค้ดให้ดูถูกต้องใน 5 นาทีที่ฉันต้องแก้ไข
drobertson

@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 ที่ฝังอยู่ในบทความ
drobertson

DOMDocument มีความไวต่อโครงสร้าง Html หากไม่สามารถโหลดเอกสารได้จะล้มเหลวอย่างมากและไม่มีวิธีการกู้คืนข้อผิดพลาด Html เล็กน้อย ฉันชอบpreg_replaceโดยตรง
Anibal

@DougRobertson AFAIK ไม่เป็นไปไม่ได้ BTW ฉันไม่คุ้นเคยกับ AngularJS แต่ถ้าใช้แอตทริบิวต์ในฝั่งไคลเอ็นต์คุณสามารถกำหนดได้ในฝั่งไคลเอ็นต์ด้วย ตัวอย่าง jQuery:$('html').attr('ng-app', 'dataManager');
Farahmand

@Fari ฉันถือว่าการทำเช่นนั้น แต่ลำดับของการโหลดมีเล่ห์เหลี่ยม ถ้าฉันสามารถควบคุมตำแหน่งของ attr เพื่อให้มันเกิดขึ้นโดยเฉพาะก่อน AngularJS เริ่มต้นแล้วความคิดของคุณอาจจะดี จนถึงตอนนี้ฉันยังไม่ได้รับที่ลงหลุมกระต่าย
drobertson

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 ?>">

ใช้วิธีนี้ฉันจะต้องแก้ไขแม่แบบหลักสำหรับทุกหน้าฉันต้องการเพิ่ม มันจะใช้งานได้ แต่มันเทอะทะมากเมื่อฉันเพิ่มหน้าและแอปพลิเคชันเพิ่มเติม ฉันกำลังมองหาวิธีเพิ่มแอตทริบิวต์คล้ายกับวิธีที่เราแทรกการอ้างอิงสคริปต์ในไลบรารี javascript มีวิธีการทำเช่นนี้?
drobertson

1
อาจจะเป็นปลั๊กอินระบบจะเป็นวิธีที่ง่ายที่สุด มันสามารถจัดการ html ที่แสดงผลก่อนที่จะให้บริการกับลูกค้าและมีข้อมูลเซสชันทั้งหมดเพื่อตรวจสอบว่าคุณลักษณะใดที่เหมาะสมสำหรับคุณ
Riccardo Zorn
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.