jQWidgets Forums

This topic contains 7 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 7 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

How to use Separate Controller for JqxWindow Posts

October 14, 2014 at 11:45 am How to use Separate Controller for JqxWindow #61103

Participant

FirstPage.html

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title id='Description'>jqxWindow Directive for AngularJS.</title>
<link rel="stylesheet" href="../css/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../Tools/angular.min.js"></script>
<script type="text/javascript" src="../Tools/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../Tools/jqxcore.js"></script>
<script type="text/javascript" src="../Tools/jqxbuttons.js"></script>
<script type="text/javascript" src="../Tools/jqxwindow.js"></script>
<script type="text/javascript" src="../Tools/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../Tools/jqxlistbox.js"></script>
<script type="text/javascript" src="../Tools/jqxscrollbar.js"></script>
<script type="text/javascript" src="../Tools/jqxpanel.js"></script>
<script type="text/javascript" src="../Tools/jqxangular.js"></script>
<script type="text/javascript">
	var demoApp = angular.module("demoApp", [ "jqwidgets" ]);
	demoApp.controller("demoController", function($scope) {
		$scope.jqxWindowSettings = {
			height : 200,
			width : 200,
			resizable : false,
			isModal : true,
			autoOpen : false,
			modalOpacity : 0.3
		};
		$scope.showWindow = function() {
			$scope.jqxWindowSettings.apply('open');
		}
		$scope.Ok = function() {
			$scope.jqxWindowSettings.apply('close');
		}
		$scope.Cancel = function() {
			$scope.jqxWindowSettings.apply('close');
		}
	});
	demoApp.controller("windowController", function($scope) {
		$scope.listBoxSource = [ '1', '2', '3' ]
		$scope.listBox = {
			source : $scope.listBoxSource,
			selectedIndex : 0,
			width : '65',
			height : '20',
		};
	});
</script>
</head>
<body class='default'>
	<div ng-controller="demoController">
		<jqx-window jqx-settings=jqxWindowSettings>
		<div>Title</div>
		<div>
			<div ng-include src="'secondPage.html'"></div>
		</div>
		</jqx-window>
		<jqx-button jqx-on-click="showWindow()">Show Window</jqx-button>
	</div>
</body>
</html>

secondPage.html

<div ng-controller="windowController">
	List Box <jqx-drop-down-list jqx-settings="listBox"></jqx-drop-down-list>
</div>

Here ListBox contents not showing in the popup window. How to set separate controller for jqxWindow.?

October 14, 2014 at 2:58 pm How to use Separate Controller for JqxWindow #61116

Peter Stoev

Keymaster

Hi shan_vs,

Widgets are with Isolated Scope which means that Content within widgets are in the Scope of their Parent Widgets.

The solution is:

Main.html:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", [ "jqwidgets" ]);
        demoApp.controller("demoController", function($scope) {
            $scope.jqxWindowSettings = {
                height : 300,
                width : 300,
                resizable : false,
                isModal : true,
                autoOpen : false,
                modalOpacity : 0.3
            };
            $scope.showWindow = function() {
                $scope.jqxWindowSettings.apply('open');
            }
            $scope.Ok = function() {
                $scope.jqxWindowSettings.apply('close');
            }
            $scope.Cancel = function() {
                $scope.jqxWindowSettings.apply('close');
            }
        });
        demoApp.controller("windowController", function($scope) {
            $scope.listBoxSource = [ '1', '2', '3' ]
            $scope.listBox = {
                source : $scope.listBoxSource,
                selectedIndex : 0,
                width : '65',
                height : '20',
            };
        });
</script>
</head>
<body ng-controller="demoController" class='default'>
	<div>
		<jqx-window ng-controller="windowController" jqx-settings=jqxWindowSettings>
		<div>Title</div>
		<div>
			<div ng-include src="'SecondPage.html'"></div>
		</div>
		</jqx-window>
		<jqx-button jqx-on-click="showWindow()">Show Window</jqx-button>
	</div>
</body>
</html>

SecondPage.html

<div>
	List Box <jqx-drop-down-list jqx-settings="listBox"></jqx-drop-down-list>
</div>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

October 15, 2014 at 8:01 am How to use Separate Controller for JqxWindow #61148

shan_vs

Participant

Hi Peter,

Thanks for your reply.

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<link rel="stylesheet" type="text/css" href="../css/jqx.base.css" />
<script type="text/javascript" src="../Tools/angular.min.js"></script>
<script type="text/javascript" src="../Tools/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../Tools/jqxcore.js"></script>
<script type="text/javascript" src="../Tools/jqxdata.js"></script>
<script type="text/javascript" src="../Tools/jqxbuttons.js"></script>
<script type="text/javascript" src="../Tools/jqxwindow.js"></script>
<script type="text/javascript" src="../Tools/jqxangular.js"></script>
<script type="text/javascript">
	var demoApp = angular.module("demoApp", [ "jqwidgets" ]);
	demoApp.controller("demoController", function($scope) {
		$scope.jqxWindowSettings = {
			height : 300,
			width : 300,
			resizable : false,
			isModal : true,
			autoOpen : false,
			modalOpacity : 0.3
		};
		$scope.showWindow = function() {
			$scope.jqxWindowSettings.apply('open');
		}

		$scope.test = "sample text";
	});
</script>
</head>
<body ng-controller="demoController" class='default'>
	<div>
		<jqx-window jqx-settings="jqxWindowSettings" id="window" >
		<div>Title {{test}}</div>
		<div>Sample {{test}}</div>
		</jqx-window>
		<jqx-button jqx-on-click="showWindow()">Show Window</jqx-button>
	</div>
</body>
</html

Here how to print the {{test}} scope variable inside <jqx-window>. If I put ng-controller in <jqx-window>, I getting this Error,

Uncaught TypeError: Object #<Object> has no method 'apply'

October 15, 2014 at 8:06 am How to use Separate Controller for JqxWindow #61150

Peter Stoev

Keymaster

Hi shan_vs.,

I think I already explained you several times that content within widgets is inside the widget’s scope which is isolated. Please, remember that because it seems that you make the same mistake over and over again. Test the sample which I sent you as it works as expected.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 15, 2014 at 11:09 am How to use Separate Controller for JqxWindow #61167

shan_vs

Participant

Hi peter,

Thanks for your response. Actually, JqxTabs and jqxWindows are isolated scope, If I use ng-controller again and again, the controller is calling again and again and also the “apply” method is getting error.

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<link rel="stylesheet" type="text/css" href="../css/jqx.base.css" />
<script type="text/javascript" src="../Tools/angular.min.js"></script>
<script type="text/javascript" src="../Tools/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../Tools/jqxcore.js"></script>
<script type="text/javascript" src="../Tools/jqxdata.js"></script>
<script type="text/javascript" src="../Tools/jqxbuttons.js"></script>
<script type="text/javascript" src="../Tools/jqxwindow.js"></script>
<script type="text/javascript" src="../Tools/jqxangular.js"></script>
<script type="text/javascript">
	var demoApp = angular.module("demoApp", [ "jqwidgets" ]);
	demoApp.controller("ParentCtrl", function($scope) {
		$scope.message = "Child updated from parent controller";
	
		$scope.clickFunction = function() {
			$scope.$broadcast('update_parent_controller', $scope.message);
			$scope.jqxWindowSettings.apply('open'); 
		};

		$scope.jqxWindowSettings = {
			height : 300,
			width : 300,
			resizable : false,
			isModal : true,
			autoOpen : false,
			modalOpacity : 0.3
		};
	});
	demoApp.controller("ChildCtrl", function($scope, $rootScope) {
		alert("ChildCtrl Controller");
		$scope.message = "Some text in child controller";

		$scope.$on("update_parent_controller", function(event, message) {
		$scope.message = message;
		});
	});
</script>
</head>
<body>
	<div ng-controller="ParentCtrl">

		<jqx-window jqx-settings="jqxWindowSettings" id="window" ng-controller="ChildCtrl">
		<div>Title</div>
		<div ng-controller="ChildCtrl">{{message}}</div>
		</jqx-window>

		<jqx-tabs>
		<ul>
			<li>Tab</li>
		</ul>
		<div>
			<button data-ng-click="clickFunction()">Click</button>
		</div>
		</jqx-tabs>
	</div>
</body>
</html>

Here if I put ng-controller=”ParentCtrl” in JqxTabs for scope, I getting this Error Uncaught TypeError: Object #<Object> has no method 'apply' in console when I click the button. How to avoid this error, please provide a sample for isolated scope and to avoid repeating ng-controller.

October 15, 2014 at 1:42 pm How to use Separate Controller for JqxWindow #61179

Peter Stoev

Keymaster

Hi shan_vs,

If you put ng-controller in the Tabs scope, you will create a new instance of that controller and that’s wrong. You should pass data, not to create a new controller.

Ex:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
   <script type="text/javascript">
       var demoApp = angular.module("demoApp", ["jqwidgets"]);
       demoApp.controller("ParentCtrl", function ($scope) {
           $scope.message = "Child updated from parent controller";

           $scope.jqxWindowSettings = {
               height: 300,
               width: 300,
               resizable: false,
               isModal: true,
               autoOpen: false,
               modalOpacity: 0.3
           };

           $scope.clickFunction = function () {
               $scope.$broadcast('update_parent_controller', $scope.message);
               $scope.jqxWindowSettings.apply('open');
           };
       });
       demoApp.controller("ChildCtrl", function ($scope, $rootScope) {
           alert("ChildCtrl Controller");
           $scope.message = "Some text in child controller";

           $scope.$on("update_parent_controller", function (event, message) {
               $scope.message = message;
           });
       });
</script>
</head>
<body ng-controller="ParentCtrl">
	<div>

		<jqx-window jqx-settings="jqxWindowSettings" id="window">
		<div>Title</div>
		<div>{{message}}</div>
		</jqx-window>

		<jqx-tabs jqx-data="clickFunction">
		<ul>
			<li>Tab</li>
		</ul>
		<div>
			<button data-ng-click="data()">Click</button>
		</div>
		</jqx-tabs>
	</div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 16, 2014 at 5:35 am How to use Separate Controller for JqxWindow #61214

shan_vs

Participant

Hi peter,

Thanks a lot. If I have only one function means, I can use Jqx-data. Suppose if the controllers have multiple functions, How I can use that functions inside docking or window.

October 16, 2014 at 5:51 am How to use Separate Controller for JqxWindow #61217

Peter Stoev

Keymaster

Hi shan_vs,

jqx-data can point to any object. This basically means that you can make it to point to an object which contains 2 or 200 functions or make it to point to your scope. Then access your things in the content using data.member notation where member is property or function.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.