ons-template is breaking my code

  • I have a shopping list that allows you to add items to an array, then displays it in a ul. This works fine until I surround the code with a <ons-template> element so it can be navigated to. What am I missing?

             <button ng-click="myNavigator.pushPage('list.html')">Go to list</button>
           <ons-template id="list.html">
                  <div class="center">{{ currentList.name }}</div>
                  <button ng-click="currentList.addItem(name)">
                    <i class="fa fa-plus"></i>
                    <input ng-model="name"/>
              <h6>My Items:</h6>
              <ul class="list">
                <li ng-repeat="item in currentList.items"> 
                  {{ item.name }}


    ShoppingList.prototype.addItem = function(name) {
                    if(!name) {
                        console.log("You must enter an item!");
                    } else {
                        var item = new ListItem(name);
                        $scope.name = "";
    $scope.currentList = new ShoppingList();
    $scope.currentList.changeName("My Shopping List");

  • Onsen UI

    @Travis-Adams You want to navigate to the next page but I cannot see any ons-navigator component there.

  • I have one on the page, I just didn’t show that part of the code. I can navigate to the page fine, but my angular code doesn’t show my data, which is the problem. Everything works fine without the <ons-template> element there, but then I just have a single page and no navigation.

  • Onsen UI

    @Travis-Adams Templates behave like different HTML files, so if you wrote a ng-controller in body or anything like that probably it won’t work.Try to specify a controller in the ons-page inside your templates.

Log in to reply