I'm currently working on an Angular application and facing an issue with passing data from my controller to a modal.
Here is the HTML code on my index page:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
...
</head>
<body ng-controller="myCtrl">
<a href="" data-toggle="modal" data-target="#myModal" ng-click="callModal({{mydata.test}})">
click here
</a>
</body>
</html>
This is how I have set up my controller:
var myApp = angular.module('myApp', []);
myApp.controller('JobListCtrl', ['$scope', '$element', '$http', '$log', function ($scope, $element, $http, $log,) {
$scope.callModal = function(test){
$scope.test = test;
}
}]);
Additionally, here's the directive I am using:
myApp.directive('myModal', ['$rootScope', '$log', '$http', function ($rootScope, $log, $http) {
return {
restrict: 'E',
templateUrl: 'modal-tpl',
replace: true,
transclude: true,
link: function (scope) {
}
};
}]);
Below is the template for my modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-content ease">
<section>
{{test}}
</section>
</div>
<div class="modal-overlay ease" data-dismiss="modal"></div>
</div>
I am looking for a way to successfully pass the value of mydata.test to the modal without using angularUI templates. Any alternative solutions would be greatly appreciated. Thank you!