Referencing an Angular controller inside a ModalView

2 posts, 0 answers
  1. J
    J avatar
    5 posts
    Member since:
    Nov 2014

    Posted 02 Dec 2014 Link to this post

    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>
  2. J
    J avatar
    5 posts
    Member since:
    Nov 2014

    Posted 02 Dec 2014 in reply to J Link to this post

    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>
  3. Kendo UI is VS 2017 Ready
Back to Top