11

I am using AngularJS to add some more advanced functionality to several of my Joomla article pages. On these pages I need to add the ng-app attribute to the <HTML> tag on my page. Currently the normal HTML tag for my Joomla (v3.3) pages looks like this;

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

and I need it to look like this;

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

This needs to be a bit dynamic since different pages may need a different ng-app directive. Is there a proper way to do this in Joomla?

I am currently importing AngularJS using the following:

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

Thank you for any help you can give.

  • How are you currently adding AngularJS and such to just those pages? – David Fritsch Aug 10 '14 at 2:39
  • I am adding AngularJS to those pages with a simple block of PHP code. Here is the code used; <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 Aug 10 '14 at 5:57
  • Sorry for the mangled code. I couldn't figure out how to get the code block to look right in the 5 mins I had to edit it. – drobertson Aug 10 '14 at 6:04
  • @DougRobertson - You can simply update your question for code updated ;) I've edited your question accordingly – Lodder Aug 10 '14 at 9:27
5

You can create a system plugin like this:

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());
    }
}
  • Thanks, this is what I was looking for. I will work on the system plugin. In the short run is it possible to do this same thing from PHP embedded inside the article itself? – drobertson Aug 10 '14 at 16:04
  • DOMDocument is very sensitive to the Html structure. If it fails to load the document, it fails in a big way and there's no way to recover a minor Html error. I prefer a straight preg_replace. – Anibal Aug 10 '14 at 20:46
  • @DougRobertson AFAIK, no it's not possible. BTW I don't familiar with AngularJS, but if the attribute is used in the client side, you can define it in the client side, too. A jQuery example: $('html').attr('ng-app', 'dataManager'); – Farahmand Aug 11 '14 at 8:01
  • @Fari I considered doing that, but the sequence of loads got tricky. If I can control the placement of the attr so that it specifically happens before AngularJS initializes then your idea may be a great one. So far I haven't gotten that far down the rabbit hole. – drobertson Aug 11 '14 at 13:49
1

You can use PHP to add dynamic content to the ng-app attribute.

In your \templates\yourtemplate\index.php file, change

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

to

<?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 ?>">
  • Using this approach I would need to modify the master template for every page I wanted to add. It would work, but it is very unwieldy as I add more pages and ng-app(s). I am looking more for a way to add an attribute similar to how we insert a script reference to a javascript library. Is there any way to do this? – drobertson Aug 10 '14 at 5:56
  • 1
    possibly a system plugin would be the easiest way. It can manipulate the rendered html just before serving it to the client, and have all the session data available to determine which attributes are appropriate for you. – Riccardo Zorn Aug 10 '14 at 8:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.