entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

AngularJS en Archivos TPL PrestaShop

Hola buen dia, estoy intentando integrar un modulo en prestashop ayudandome de AngularJS para reducir el trabajo en la modificacion de dicho framework para ecommerce el detalle esta al momento de querer acceder a las variables de mi modelo JS porque al parecer existe problemas al querer imprimirlos con {{}} por ejemplo

<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
    <p>Name : <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>
</div>

</body>
</html

lo que esta en {{name}} no funciona sin embargo he probado esto

<div ng-app="">

<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>

<label></label>
<input type="text" ng-model="name" placeholder="Enter name here">

</div>

y con eso descarto de que no este funcionando el Angular ya que en esta si funciono perfectamente ¿Existe algun modo de poder incluir esa instrucción en los tpl sin afectar su funcionamiento?

2 Respuestas

3votos

AdanCervera Puntos2360

Logre corregir el problema, o mejor dicho logre encontrar una alternativa a usar de esa forma el acceso e impresión de los valores fue con lo siguiente.

<div data-ng-bind="value"></div>

"data-ng-bind" este atributo me permitio hacer lo que queria.

1voto

Peter comentado

Gracias por compartir la solución!

4votos

magarzon Puntos27870

Hola.

Aunque ya has encontrado una alternativa, creo que el problema está en que los templates de Prestashop están basados en el motor de templates Smarty, y en Smarty los caracteres {} son usados por el propio template para incluir sus datos (pasa lo mismo con otro motor de templates, twig, usado por Symfony), por eso entiende el {{name}} como algo del template, y no algo de angular

Lo que tienes que hacer es cambiar en angular (en Smarty supongo que también se puede, pero te será más fácil hacerlo en angular) los caracteres que utiliza para los bind de variables, y utilizar por ejemplo [[]].

Para ello, debes configurarlo así:

angular.module('myApp', [])
           .config(configuration);

    configuration.$inject = ['$interpolateProvider'];

    function configuration($interpolateProvider) {
        $interpolateProvider.startSymbol('[[');
        $interpolateProvider.endSymbol(']]');
    }

Y en los lugares que utilices binds de angular, usar [[ y ]]:

<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
    <p>Name : <input type="text" ng-model="name"></p>
    <h1>Hello [[name]]</h1>
</div>

</body>
</html>

Saludos.

1voto

AdanCervera comentado

Excelente! ya lo probé y funciono; creo que utilizare mejor tu solución; Gracias!

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Actividad Reciente

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta