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?

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

    JavaScript:

    ShoppingList.prototype.addItem = function(name) {
                    if(!name) {
                        console.log("You must enter an item!");
                    } else {
                        var item = new ListItem(name);
                        this.items.push(item);
                        $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