Adding my own inline template in html and access to scope


#1

I want to create a template in my page source and have in filled in dynamically with data from the controller scope. e.g.

<script id="templates/menu.html" type="text/ng-template">
  <div class="list">
    <a class="item" href="#" ng-repeat="option in optionItems">{{option}}</a>
  </div>
</script>

I have been able to do this by adding a HTML component to the page using the Ionic Creator UI. Though, I have a problem if I add any other new components to the page later using IC, they will be after the html child element in the page, and then they will not display in the preview mode. Appears that anything after my html element in the child page is hidden. If I do some tricks in IC to move the html child element back to the bottom then it works ok. Hack workaround.

I also tried creating a new page and then placing the script contents above in the html page. And, then reference this page in my main controller, e.g.

$ionicPopover.fromTemplateUrl('templates/myNewPage.html', {
    scope: $scope,
  }).then(function(popover) {
    $scope.popover = popover;
  });        

Though, the page has its own controller and not my calling page controller. So, it does not expand properly.

How can I add my own ng-templates to a page in the IC UI, or reference others with my scope?


#2

I have the same question! Can anybody help? @rlangham, I’m guessing you don’t want to use an html string, like this:
function ($scope, $stateParams, $ionicModal) { $scope.modal = $ionicModal.fromTemplate( "<ion-modal-view>"+ "<ion-header-bar>"+ "<h1 class='title'>hello world!</h1>"+ "</ion-header-bar>"+ "<ion-content>"+ "<p>yo.</p>"+ "</ion-content>"+ "</ion-modal-view>", { scope: $scope, animation: 'slide-in-up' }) $scope.showModal = function(){ $scope.modal.show(); } }

For me, this method is too, impractical as I cram a lot of content into my modal. Passing in the html string was something that @mattkremer showed off in this tutorial : http://docs.usecreator.com/docs/custom-code-editing (jump to 21:25).


#3

prefer to use an inline template. it works, it just has to be the bottom element in the page. So, if I add new ones, I just manually create a new html element at the bottom, copy the template from the existing one to the new one, then delete the old one. It is just a UI thing that for some reason hides anything after it in the UI, while still working fine at runtime.


#4

(Forgive me, I am a designer, and pretty new to code) Can you help me understand your code a little? All this code is being added in Creator, to one of your pages’ controller, right? If so, how are you able to reference 'templates/myNewPage.html' like that? I didn’t realize that there is a parent repository(‘templates’) with html pages saved in it. Can you help me understand where 'templates/myNewPage.html' is pointing. I understand that you can use 'templates/myNewPage.html' when developing locally, but I don’t understand how you can do this within Creator. Here is the code I keep referring to:

$ionicPopover.fromTemplateUrl('templates/myNewPage.html', {
    scope: $scope,
  }).then(function(popover) {
    $scope.popover = popover;
  });

Thanks, Matthew


#5

Yes, the $ionicPopover code is in my page controller. The templates/myNewPage.html refers some html that I have living in a Html Ionic Creator component that resides under my Page. As shown above, it looks like…

<script id="templates/menu.html" type="text/ng-template">
  <div class="list">
    <a class="item" href="#" ng-repeat="option in optionItems">{{option}}</a>
  </div>
</script>

So, in my Page, I dragged over a Html Component to the designer and it placed it under my Page. In the designer, I clicked on the ‘Popout’ link option to edit the Html component, which is where I placed the above script.

In my page controller, I then specify that the ionicPopover use this content as its template. Below shows the code as well as the scope methods that I use to show and hide the popover.

    $ionicPopover.fromTemplateUrl('templates/menu.html', {
        scope: $scope,
      }).then(function(popover) {
        $scope.popover = popover;
      });        
      
    $scope.openPopover = function($event) {
        $scope.popover.show($event);
    };    
      
    $scope.closePopover = function() {
        $scope.popover.hide();
    };
    
    //Cleanup the popover when we're done with it!
    $scope.$on('$destroy', function() {
        $scope.popover.remove();
    });
    

This all works great in the Ionic Creator UI until I drag over another Component onto the designer. Once that occurs, my html template is no longer the last child component under the page. That is when the preview stops working for any elements that follow the Html child component. To fix, I have to re-drag another Html component over so that it is last in the list, copy/paste the template content to the new Html component, then delete the old one. Just an annoyance that seems like it could potentially be easily fixed.