Geek Answers Handbook

Javascript does not work in Onsen user interface ons template

I am trying to integrate panzoom into the Onsen user interface so that I can scale images. However, it only scales if it is placed under ons-page. It will not work under ons-template. This is my code that does 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>
+4
source share
1 answer

Any script written in templates is not executed. The contents of the template are transferred by the navigator as text to the DOM innerHTML object.

Since eval () is not automatically executed, you have to do it manually. refer to this question.

javascript ( ). postPush prePush ons-navigator . onsen docs ( ons0nvaigator)

ons.ready(callback) DetailController ( Angular). onsen docs ( onsen)

0

More articles:


All Articles