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");
-
@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.
-
@Travis-Adams Templates behave like different HTML files, so if you wrote a
ng-controller
inbody
or anything like that probably it won’t work.Try to specify a controller in theons-page
inside your templates.