I'm in the process of developing an application that will showcase job details within a modal window based on the selected template. To achieve this, I've integrated ui.bootstrap and ui.router. However, I'm encountering difficulties in displaying the objects as desired. Even though $http.get seems to be functioning correctly, as evidenced by the object being displayed when I use console.log(specs).
Below is my code:
HTML
<div class="car-up" ng-controller="carCtrl">
<script type="text/ng-template" id="careersTpl.html">
<div class="closer">
<span class="close-me" ng-click="ok()">X</span>
</div>
<div class="modal-body">
<span>{{placeholder}}</span>
</div>
<div class="modal-body modtwo">
<ul>
<li><a ui-sref="sales">Sales Department</a></li>
</ul>
<ul>
<li><a ui-sref="webd">Web Developer</a></li>
<li><a ui-sref="crm">Client Relationship Manager</a></li>
<li></li>
</ul>
<div class="show-me" ui-view></div>
</div>
</script>
<button class="btn" ng-click="open()">Open</button>
</div>
app.js
var app = angular.module('carApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap', 'ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('webd', {
url: "/web-developer",
templateUrl: "templates/web-developer.html",
})
.state('crm', {
url: "/crm",
templateUrl: "templates/crm-uk.html"
})
}]);
ctrl.js
app.controller('carCtrl', function($scope, $http, $uibModal) {
$http.get('jobs.json').then(function(response) {
$scope.placeholder = response.data.default;
$scope.specs = response.data.specs;
$scope.open = function() {
var modalContent = $uibModal.open({
templateUrl: 'careersTpl.html',
controller : 'modalContentCtrl',
controllerAs: '$ctrl',
size: 'lg',
backdropClass: 'backdropOver',
openedClass: 'modal-opened',
resolve: {
items: function() { return $scope.specs; },
items2: function() { return $scope.placeholder;}
}
})
console.log($scope.placeholder);
console.log($scope.specs);
console.log($scope.specs.crm);
}
});
});
app.controller('modalContentCtrl', function($scope, $uibModalInstance, items, items2) {
$scope.specs = items;
$scope.placeholder = items2;
$scope.ok = function() {
$uibModalInstance.close();
}
});
crm-uk.html
<div ng-repeat="(k, v) in specs.crm">
<h3>{{v["job-title"]}}</h3>
<p>{{v["job-body"]}}</p>
Apply Here:
<p>{{v["job-apply"]}}</p>
</div>
web-developer.html
<div ng-repeat="(k, v) in specs.web-dev">
<h3>{{v["job-title"]}}</h3>
<p>{{v["job-body"]}}</p>
Apply Here:
<p>{{v["job-apply"]}}</p>
</div>
JSON
{
"default":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"specs":{
"web-dev":{
"job-title":"Web Developer",
"job-body":"Lorem Ipsum Body Text",
"job-apply":"applink"
},
"crm":{
"job-title":"Client Relationship Manager",
"job-body":"Lorem Ipsum CRM Text",
"job-apply":"applylink"
}
}
}
I suspect there might be an issue with my .json file or how I am accessing it, but I can't seem to pinpoint the exact problem.
If anyone could offer some assistance, that would be greatly appreciated.
Thank you.