Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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.