lotteryman lotteryman - 1 year ago 57
HTML Question

$ionicPopover.fromTemplateUrl not working when change to new directory path

I did a popover function with ionic 1 for my app. It works fine.However,
my code not working if I move from the original directory to new directory path.

popover.html
is contains inside
page.html
. It is part of the code of
page.html


How can I change the right directory in the code? I try with

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


but it does not work

Original directory path

/www/js/controllers/page.js


/www/templates/page.html


new directory path

/www/all/page/page.js


/www/all/page/page.html


page.js (current working code)

$ionicPopover.fromTemplateUrl('popover.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();
});

// Execute action on hide popover
$scope.$on('popover.hidden', function() {
// Execute action
});

// Execute action on remove popover
$scope.$on('popover.removed', function() {
// Execute action
});


page.html(current working code)

<button class="button" ng-click="openPopover($event)"><i class="ion-android-more-vertical"></i></button>

<script id = "popover.html" type = "text/ng-template">
<ion-popover-view>
<ion-content>
<div class="list" ng-click="popover.hide()">
<a class="item" href="#/app/morepage">
Apple
</a>
<a class="item" href="#/app/morepage1">
Orange
</a>
</div>
</ion-content>
</ion-popover-view>
</script>


In app.js

.state('app.page', {
url: '/page',
views: {
'menuContent': {
templateUrl: '/all/page/page.html',
controller: 'page'
}
}
})

Answer Source

Try this one to demostrate if you want to change fromTemplateUrl

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

in the page.html in the <script> change this

<script id = "/all/page/popover.html" type = "text/ng-template">
<ion-popover-view>
  <ion-content>
    <div class="list" ng-click="popover.hide()">
      <a class="item" href="#/app/morepage">
        Apple
      </a>
      <a class="item" href="#/app/morepage1">
        Orange
      </a>
    </div>
  </ion-content>
</ion-popover-view>

the reason why $ionicPopover.fromTemplateUrl('popover.html') works its because in the page.html its relative name was the same.

If you change the above, needs change the html. its represent relative paths. if physically existe the file, i really need to be in the path you indicate.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download