jQWidgets Forums

jQuery UI Widgets › Forums › Plugins › AngularJS › How to get $scope inside a

Tagged: , ,

This topic contains 8 replies, has 2 voices, and was last updated by  Kavyad23 10 years, 8 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    How to get $scope inside a Posts
  • September 30, 2014 at 9:02 am How to get $scope inside a #60337

    Kavyad23
    Participant
    <!DOCTYPE html>
<html ng-app="App" lang="en">
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="../CSS/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../CSS/Style.css" type="text/css" />
<script src="../CommonFiles/import.js"></script>
<script type="text/javascript">
	var App = angular.module("App", [ "jqwidgets" ]);
	
	App.controller("Controller", function($scope) {
		$scope.menuSettings = {
			width : '100%',
			height : '32px',
			autoSizeMainItems : true
		}
		$scope.ChangeWatchType = function() {

			alert("watchType");
		}
		
	});
</script>
</head>
<body style="background: #EEE;">
	<div ng-controller="Controller">
		
			<jqx-docking jqx-mode="'default'" id="docking"
				style="float: left;" jqx-settings="dockSettings">
			<div>
				<div class="window">
                                      <div>Title
					<jqx-menu jqx-settings="menuSettings" style="visibility: visible; width: 12px !important; height: 15px         
                                                                    !important; background: transparent !important; border: none !important;">
					    <ul id="WatchType">
							<li><a href="#" ng-click="ChangeWatchType()">Advanced</a></li>
							<li><a href="#" ng-click="ChangeWatchType()">Ladder</a></li>
					    </ul>
					</jqx-menu>
                                  </div>
			          <div>
					
                                      Contents	
				     	
   				   </div>
			       </div>
                        </div>
			</jqx-docking>
		</div>
</body>
</html>

    Here I want to call, “ChangeWatchType()” function in tag. But scope is not getting inside docking window. how to get that globally.?

    September 30, 2014 at 9:12 am How to get $scope inside a #60340

    Kavyad23
    Participant

    Here I want to call, “ChangeWatchType()” function in anchor tag. But $scope is not getting inside docking window. how to get that globally.?

    September 30, 2014 at 9:47 am How to get $scope inside a #60346

    Peter Stoev
    Keymaster

    Hi Kavyad23,

    For handling clicks in jqxMenu items, you can use its “itemclick” event.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    September 30, 2014 at 9:55 am How to get $scope inside a #60347

    Kavyad23
    Participant

    Hi Peter,

    Please provide the samples in angularjs. I am completly implementing in Angularjs. and also $scope variables not printing inside jqxDocking. How to solve this.

    September 30, 2014 at 10:02 am How to get $scope inside a #60349

    Kavyad23
    Participant
    	$scope.$on('itemclick', function() {
			 alert($(event.target).text());
		})

    Is this correct for JqxMenu Itemclick in angularjs?

    September 30, 2014 at 10:06 am How to get $scope inside a #60350

    Peter Stoev
    Keymaster

    Hi Kavyad23,

    Yes, the menu’s event is called “itemclick”. However, in your code “event” seems to be undefined.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    September 30, 2014 at 10:13 am How to get $scope inside a #60351

    Kavyad23
    Participant

    But Now also Its not working,

    <!DOCTYPE html>
<html ng-app="ForexOrderBookApp" lang="en">
<head>
<meta charset="ISO-8859-1">
<title>Intellect GoTx FX Portal</title>
<link rel="stylesheet" href="../CSS/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../CSS/Style.css" type="text/css" />
<script src="../CommonFiles/import.js"></script>
<script type="text/javascript">
	var ForexOrderBookApp = angular
			.module("ForexOrderBookApp", [ "jqwidgets" ]);
	
	ForexOrderBookApp.controller("ForexOrderBookController", function($scope) {

		$scope.$on('jqxMenuCreated', function() {
			$scope.menuSettings.apply('minimize');
		});
		$scope.menuSettings = {
			width : '100%',
			height : '32px',
			autoSizeMainItems : true
		}

		$scope.$on('itemclick', function(event) {
			alert($(event.target).text());
		})

	});
</script>
</head>
<body style="background: #EEE;">
	<div ng-controller="ForexOrderBookController">

		<div class="minimizedBtn"
			style="float: left; margin: 0; padding: 0; margin-left: 100px;">
			<jqx-menu jqx-settings="menuSettings"
				style="visibility: visible; width: 12px !important; height: 15px !important; background: transparent !important; border: none !important;">
			<ul id="WatchType">
				<li><a href="#">Advanced</a></li>
				<li><a href="#">Ladder</a></li>
			</ul>
			</jqx-menu>
		</div>
</body>
</html>
    September 30, 2014 at 10:24 am How to get $scope inside a #60353

    Peter Stoev
    Keymaster

    Hi Kavyad23,

    You did not bind to that event. Did you learn from the documentation how to bind to events?

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    September 30, 2014 at 10:32 am How to get $scope inside a #60354

    Kavyad23
    Participant

    Hi peter,

    I got the solution. Thank you. Now I learned “How to bin events”.

    Thank you.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.