Maneira correta de adicionar atributos à tag HTML da página Joomla?

Estou usando o AngularJS para adicionar algumas funcionalidades mais avançadas a várias das minhas páginas de artigos do Joomla. Nestas páginas, preciso adicionar o atributo ng-app à <HTML>tag da minha página. Atualmente, a tag HTML normal para minhas páginas do Joomla (v3.3) se parece com isso;

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

e eu preciso que fique assim;

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

Isso precisa ser um pouco dinâmico, pois páginas diferentes podem precisar de uma diretiva ng-app diferente. Existe uma maneira adequada de fazer isso no Joomla?

Atualmente, estou importando o AngularJS usando o seguinte:

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

Obrigado por qualquer ajuda que você pode dar.

joomla-api

— Drobertson
fonte

Como você está adicionando o AngularJS atualmente e apenas nessas páginas?

— David Fritsch

Estou adicionando o AngularJS a essas páginas com um simples bloco de código PHP. Aqui está o código usado; <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

Desculpe pelo código mutilado. Eu não conseguia descobrir como obter o bloco de código dentro dos 5 minutos que precisei editá-lo.

— drobertson

@DougRobertson - Você pode simplesmente atualizar a sua pergunta para o código atualizado;) Eu editei a pergunta nesse sentido

— Lodder

Respostas:

Você pode criar um systemplugin como este:

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
fonte

Obrigado, é isso que eu estava procurando. Vou trabalhar no plugin do sistema. No curto prazo, é possível fazer a mesma coisa do PHP incorporado no próprio artigo?

— drobertson

DOMDocument é muito sensível à estrutura Html. Se ele falhar ao carregar o documento, ele falha muito e não há como recuperar um pequeno erro de HTML. Eu prefiro um preg_replace direto .

— Anibal

@DougRobertson AFAIK, não, não é possível. BTW, eu não conheço o AngularJS, mas se o atributo for usado no lado do cliente, você também poderá defini-lo no lado do cliente. Um exemplo do jQuery:$('html').attr('ng-app', 'dataManager');

— Farahmand

@Fari, eu considerei fazer isso, mas a sequência de cargas ficou complicada. Se eu conseguir controlar o posicionamento do attr para que isso aconteça antes da inicialização do AngularJS, sua ideia poderá ser ótima. Até agora não cheguei tão longe na toca do coelho.

— drobertson

Você pode usar o PHP para adicionar conteúdo dinâmico ao ng-appatributo.

No seu \templates\yourtemplate\index.phparquivo, altere

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

para

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

Usando essa abordagem, eu precisaria modificar o modelo mestre para todas as páginas que desejei adicionar. Funcionaria, mas é muito pesado, à medida que adiciono mais páginas e aplicativos de ng. Estou procurando mais uma maneira de adicionar um atributo semelhante ao modo como inserimos uma referência de script em uma biblioteca javascript. Há alguma maneira de fazer isso?

— drobertson

possivelmente um plugin do sistema seria a maneira mais fácil. Ele pode manipular o html renderizado imediatamente antes de servi-lo ao cliente e ter todos os dados da sessão disponíveis para determinar quais atributos são apropriados para você.

— Riccardo Zorn