Javascript not working in ons-template of Onsen UI

Question

I'm trying to integrate panzoom in Onsen UI to allow zooming of images. However it only zoom if it put in under ons-page. It won't work under ons-template. This is my code which is not work.

<body ng-controller="AppController">    

  <ons-navigator var="navi">
    <ons-page>
      <ons-toolbar>
        <div class="center">App</div>
      </ons-toolbar>

      <ons-list ng-controller="MasterController">
        <ons-list-item modifier="chevron" class="item" ng-repeat="item in items" ng-click="showDetail($index)">
          <ons-row>
            <ons-col>
              <header>
                <span class="item-title">{{item.title}}</span>
              </header>
            </ons-col>
          </ons-row>                          
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-navigator>

  <ons-template id="detail.html">
    <ons-page ng-controller="DetailController">

      <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">Details</div>
      </ons-toolbar>

      <ons-list modifier="inset" style="margin-top: 10px">
        <ons-list-item class="item">
          <ons-row>
            <ons-col>
              <header>
                <span class="item-title">{{item.title}}</span>
              </header>
            </ons-col>
          </ons-row>
        </ons-list-item>

      </ons-list>

      <ons-list style="margin-top: 10px">
        <ons-list-item class="item">
          <p class="item-desc"><img src="{{item.desc}}" />
<script>
    $(document).ready(function() {
      $("img").panzoom();
    });
</script></p>
        </ons-list-item>
      </ons-list>

      <br>
    </ons-page>
  </ons-template>
</body>

I don't think you need to write your JavaScript code there. If you want to zoom something inside that page when it is ready you can use the `pageinit` event that is fired every time a new page is created. Or you can have a look at navigator events: http://onsen.io/reference/ons-navigator.html#event-prepush — Fran Dios, Jun 08 '15 at 01:32

score 0 · Accepted Answer · edited May 23 '17 at 12:01

Any script written in the templates isn't executed. The contents of the template are passed by the navigator as text into DOM object's innerHTML.

Since eval() isnt done automatically, you'll have to do it manually. refer to this question.

I suggest you restructure your javascript (put it else where) Then you can use the postPush and prePush properties of ons-navigator to call the function when page loads. refer onsen docs (ons0nvaigator attributes)

Alternatively, you wan to, you can use ons.ready(callback) in your 'DetailController' controller and perform the panzoom there (if you want to use Angular). refer onsen docs (onsen object ready)

Javascript not working in ons-template of Onsen UI

1 Answers1