As a content of a modalView I'd like to use an Angular template (because the whole app is Angular based). But it seems like it doesn't see an Angular controller. So, for example, ng-click for a button inside a template doesn't work. On the other hand if I use onclick for the button it works fine (with just JavaScript code outside of any angular controller). The question is if it is possible at all to use an Angular controller/directive inside a modalView?
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="//cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.silver.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.silver.mobile.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
<script src="Scripts/angular-kendo.js"></script>
<script id="template" type="text/x-kendo-template">
<div ng-app="MyApp" ng-controller="MyCtrl">
<button ng-click="closeD()">cancel</button> <!--Doesn't work-->
<!--<button onclick="closeD()">cancel</button> Works fine-->
</div>
</script>
<script>
angular.module("MyApp", ["kendo.directives"])
.controller("MyCtrl", function ($scope, $http) {
$scope.openD = function () {
var template = kendo.template($("#template").html());
$("#modalview-login").html(template);
$("#modalview-login").data("kendoMobileModalView").open();
}
$scope.closeD = function () {
$("#modalview-login-button").data("kendoMobileModalView").close();
}
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<div>
<button ng-click="openD()">Open ModalView</button>
</div>
<div id="modalview-login" data-kendo-mobile-modal-view="modal" style="width: 50%;"></div>
</div>
<script>
function closeD() {
$("#modalview-login").data("kendoMobileModalView").close();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="//cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.silver.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.silver.mobile.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
<script src="Scripts/angular-kendo.js"></script>
<script id="template" type="text/x-kendo-template">
<div ng-app="MyApp" ng-controller="MyCtrl">
<button ng-click="closeD()">cancel</button> <!--Doesn't work-->
<!--<button onclick="closeD()">cancel</button> Works fine-->
</div>
</script>
<script>
angular.module("MyApp", ["kendo.directives"])
.controller("MyCtrl", function ($scope, $http) {
$scope.openD = function () {
var template = kendo.template($("#template").html());
$("#modalview-login").html(template);
$("#modalview-login").data("kendoMobileModalView").open();
}
$scope.closeD = function () {
$("#modalview-login-button").data("kendoMobileModalView").close();
}
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<div>
<button ng-click="openD()">Open ModalView</button>
</div>
<div id="modalview-login" data-kendo-mobile-modal-view="modal" style="width: 50%;"></div>
</div>
<script>
function closeD() {
$("#modalview-login").data("kendoMobileModalView").close();
}
</script>
</body>
</html>
1 Answer, 1 is accepted
0
J
Top achievements
Rank 1
Rank 1
answered on 02 Dec 2014, 03:55 PM
Found one way of doing it. (using $compile)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="//cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.silver.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.silver.mobile.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
<script src="Scripts/angular-kendo.js"></script>
<script id="template" type="text/x-kendo-template">
<div ng-app="MyApp" ng-controller="MyCtrl">
<button ng-click="closeD()">cancel</button>
</div>
</script>
<script>
angular.module("MyApp", ["kendo.directives"])
.controller("MyCtrl", function ($scope, $http, $compile) {
$scope.openD = function () {
$("#modalview-login").data("kendoMobileModalView").open();
}
$scope.closeD = function () {
$("#modalview-login").data("kendoMobileModalView").close();
}
$scope.init = function() {
var $content = $('#modalview-login');
var template = kendo.template($("#template").html());
$content.html(template);
var scope = $content.scope();
$compile($content.contents())(scope);
scope.$digest();
}
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl" data-ng-init="init()">
<div>
<button ng-click="openD()">Open ModalView</button>
</div>
<div id="modalview-login" data-kendo-mobile-modal-view="modal" style="width: 50%;"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="//cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.silver.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.silver.mobile.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
<script src="Scripts/angular-kendo.js"></script>
<script id="template" type="text/x-kendo-template">
<div ng-app="MyApp" ng-controller="MyCtrl">
<button ng-click="closeD()">cancel</button>
</div>
</script>
<script>
angular.module("MyApp", ["kendo.directives"])
.controller("MyCtrl", function ($scope, $http, $compile) {
$scope.openD = function () {
$("#modalview-login").data("kendoMobileModalView").open();
}
$scope.closeD = function () {
$("#modalview-login").data("kendoMobileModalView").close();
}
$scope.init = function() {
var $content = $('#modalview-login');
var template = kendo.template($("#template").html());
$content.html(template);
var scope = $content.scope();
$compile($content.contents())(scope);
scope.$digest();
}
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl" data-ng-init="init()">
<div>
<button ng-click="openD()">Open ModalView</button>
</div>
<div id="modalview-login" data-kendo-mobile-modal-view="modal" style="width: 50%;"></div>
</div>
</body>
</html>