I am new using Angularjs and KendoUI, I am trying to open multiple windows using kendoUI and add an angularjs html external file in it, the problem is when I attempt to open the window, the html page that is inside of the window opens correctly but the angular code that is in it it doesn't work.
This is my main page index.html:
<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<div class="demo-section k-content">
<button class="k-button" ng-click="open()">Content</button>
</div>
<p>{{ data.fName }}</p>
</div>
<style>
.example {
min-height: 400px;
}
</style>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
var noteNumber = 0;
$scope.data= {
fName : 'hello'
}
$scope.open=function(){
var noteWindowDivId = "noteWindow" + noteNumber;
$("<div id=noteWindowDivId />").appendTo(document.body).kendoWindow ({
draggable: true,
resizable: true,
width: "500px",
height: "375px",
title: "Multiventanas",
scrollable: true,
modal: false,
content : "databinding.html" ,
actions: ["Minimize", "Maximize", "Close"]
});
$("#noteWindowDivId").data("kendoWindow");
noteNumber++;
}
})
</script>
</body>
</html>
This is my Angular external file "databinding.html" :
<div ng-app="invoice1" ng-controller="InvoiceController as invoice">
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/invoice1.js" type="text/javascript"></script>
<b>Invoice:</b>
<div>
Quantity: <input type="number" min="0" ng-model="invoice.qty" required >
</div>
<div>
Costs: <input type="number" min="0" ng-model="invoice.cost" required >
<select ng-model="invoice.inCurr">
<option ng-repeat="c in invoice.currencies">{{c}}</option>
</select>
</div>
<div>
<b>Total:</b>
<span ng-repeat="c in invoice.currencies">
{{invoice.total(c) | currency:c}}
</span>
<button class="btn" ng-click="invoice.pay()">Pay</button>
</div>
</div>
The thing is when the databinding.html shows in the windows, all databinding made in angular is lost and anything on angular works, so i would like that you tell me if i am doing something wrong or how can i put that html inside a kendo windows and that angular code works correctly.
Thanks.
