CODEWITHSUNDEEP
phpangularjsangular-ui-bootstrapbootstrap-modal
masterFly
masterFly

Reputation: 1112

Angular - Modal does not open but gives an error

I have a PHP page with some PHP functionalities and HTML code. Angular app is bootstrapped and working fine.

But I added a modal to be open but it gives me the following error in the console.

http://errors.angularjs.org/1.4.8/$compile/tpload?p0=uib%2Ftemplate%2Fmodal%2Fwindow.html&p1=404&p2=Not%20Found

Error says it comes when the template is not there, but it is there.

Please help me on figuring this out!

My main php file (body tag)

<body>
    <div ng-app="myApp" ng-controller="mainController as vm" ng-cloak>
        <span ng-click="vm.openPackage(1)">TEST-OPEN</span>

        <script type="text/ng-template" id="package.html">
            <div class="modal-header">
                <h3 class="modal-title" id="modal-title">{{ vm.package.title}}</h3>
            </div>
            <div class="modal-body" id="modal-body">
                <p>{{ vm.package.description}}</p>
            </div>
        </script>
    </div>
</body>

My JS file

var app = angular.module('myApp', [
    "ui.bootstrap"
]);

app.controller('mainController', ["$scope", "$http", "$uibModal", function ($scope, $http, $uibModal) {
    var vm = this;

    vm.openPackage = function (package) {
        $http.get("apipackage.php?id=" + package).then(function (data) {
            vm.package = data;

            var modalInstance = $uibModal.open({
                animation: true,
                templateUrl: 'package.html',
                controller: 'PackageController',
                controllerAs: 'vm',
                resolve: {
                    package: function () {
                        return vm.package;
                    }
                }
            });
        }, function (error) {});
    };
}]);

app.controller('PackageController', ["$uibModalInstance", "package", function ($uibModalInstance, package) {
    var vm = this;
    vm.package = package;
}]);

In the main php file I have included the following as per the documentation.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.1.4/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-touch.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

I cannot figure out why I get the template not found error when I have it in the main php file.

Could you guys please help me on figuring out how to solve this error?

Thanks in advance!

Upvotes: 0

Views: 66

Answers (1)

svarog
svarog

Reputation: 9839

You are using the template-less version of ui-bootstrap script, so angular can't find the window.html template that the modal is requesting.

Replace 

http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.1.4/ui-bootstrap.min.js

with 

http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.1.4/ui-bootstrap-tpls.min.js

or just manually add the modal template instead.

Upvotes: 1

Related Questions