ons-template is breaking my code

Travis Adams

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");

Fran Diox

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

Travis Adams

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.

Fran Diox

@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.