AngularJS in TPL Files PrestaShop


I am trying to integrate a module in PrestaShop with the help of AngularJS to reduce the work in modifying this framework for ecommerce. The detail is that at the moment of wanting to access the variables of my JS model, apparently there are problems when wanting to print them with {{}} for example

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

what is in {{name}} does not work, however I have tried this:

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

and with that I rule out that the Angular is not working since in this one it worked perfectly Is there any way to include that instruction in the tpl without affecting its operation?

asked by Adan Cervera 15.09.2016 в 07:13

3 answers


I managed to correct the problem, or rather I managed to find an alternative to use in that way the access and impression of the values was with the following

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

"data-ng-bind" this attribute allowed me to do what I wanted.

answered by 15.09.2016 / 07:52

You must escape from smarty. Utilza {literal}

It would be like this:

<h1>Hello {literal}{{name}}{/literal}</h1>
answered by 01.01.2017 в 19:44

I think your mistake has been in this part:

<div ng-app="">

Since you have not indicated which driver or app you have to launch.

Example using scopes:


<script type="text/javascript">
  var angularApp = angular.module('miApp');


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

Controlador JS

var app = angular.module('ofertaCex', ['ngSanitize', 'ui.slider', 'angular.filter']);

app.controller('AppController', function($scope, $timeout, $q) {
    $ = '';
answered by 17.11.2016 в 12:55