I have an Angular Js - Typescript project. I'm trying to develop a Modal with Angular-Foundation, but it's not working.
This is my code:
HTML
<div>
<script type="text/ng-template" id="myModalContent.html">
<h3>I'm a modal!</h3>
<ul>
<li ng-repeat="item in vm.items">
<a ng-click="selected.item = item">{{ vm.item }}</a>
</li>
</ul>
<p>Selected: <b>{{ selected.item }}</b></p>
<button class="button secondary" ng-click="reposition()">Reset top position</button>
<a class="close-reveal-modal" ng-click="vm.cancelModal()">× </a>
</script>
<button class="button" ng-click="vm.openModal()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }} </div>
</div>
Controller
public items: any[];
constructor(private $modal: any){
this.items = ["item1", "item2", "item3"];
}
public openModal() {
let modalInstance = this.$modal.open({
templateUrl: "myModalContent.html",
controller: "MissionsCtrl",
resolve: {
items: function () {
return this.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
this.selected = selectedItem;
}, function () {
console.log("Modal dismissed at:" + new Date());
});
}
And this is the error I get:
INFO: I have the module "mm.foundation" included in app.ts, and JS files (mm-foundation.min.js and mm-foundation-tpls.min.js) correctly referenced in index.html.
Ultimately, someone knows how to implement a modal with AngularJS and Typescript without using angular-foundation?
I have no idea where the problem is.
Thanks in advance!
EDIT:
I add my app.ts file:
(function(){
"use strict";
angular.module("MyApp", [
"ngSanitize",
"pascalprecht.translate",
"color.picker",
"ui.router",
"mm.foundation",
"app.core",
]);
})();
Reading Angular Docs I believe that the issue is in my controller, but I still didn't know how to solve it.
