jQuery UI Widgets Forums Plugins AngularJS directive can't take a jqx-set-selection attribute

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 8 years, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • david
    Participant

    I have a <jqx-button-group> directive defined in my application, and I would like to initialize it with the third button selected by default. In Jquery I would call $(‘#jqxButtonGroup’).jqxButtonGroup(‘setSelection’, 2); as described on your API page, immediately after initializing the widget, but I can’t find a similar function for the directive. Is there one?


    Dimitar
    Participant

    Hello david,

    Please take a look at this example that shows how to call the setSelection method in an AngularJS environment. I also suggest you refer to the tutorial jQWidgets Integration with AngularJS to learn how to invoke widget methods in this case.

    <!DOCTYPE html>
    <html ng-app="demoApp">
    <head>
        <link rel="stylesheet" type="text/css" href="../../../jqwidgets/styles/jqx.base.css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/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/jqxradiobutton.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxbuttongroup.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.myButtonGroup = {};
                $scope.buttonGroupMode = 'radio';
    
                $scope.$on('jqxButtonGroupCreated', function (event, arguments)
                {
                    $scope.myButtonGroup.setSelection(2);
                });
            });
        </script>
    </head>
    <body>
        <div ng-controller="demoController">
            <jqx-button-group jqx-mode="buttonGroupMode" jqx-instance="myButtonGroup">
                <button style="padding:4px 16px;">Left</button>
                <button style="padding:4px 16px;">Center</button>
                <button style="padding:4px 16px;">Right</button>
            </jqx-button-group>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    david
    Participant

    Thanks Dimitar,

    Here is my difficulty: I am trying to enclose the jqx-button-group directive inside my own directive with isolate scope using the controllerAs to access the directive controller. It takes an array of options and populates the button group with those options, a default “selected” option index, and a function to execute whenever a new option is selected. Here’s my directive as it stands, attempting to incorporate $on(‘jqxButtonGroupCreated’):

    
    (function() {
    
        var filterSelector = function () {
            return {
                restrict: 'E',
                scope: {
                    options: '=',
                    selected: '@',
                    onchange: '&'
                },
                controller: controller,
                controllerAs: 'fsc',
                bindToController: true,
                template: template
            }
        };
    
        var template =
            '<jqx-button-group ' +
            'jqx-instance="fsc.filterSelector" ' +
            'jqx-on-selected="fsc.onButtonClick(event)" ' +
            'jqx-settings="fsc.jqxSettings">' +
            '<button style="padding:4px 16px" ng-repeat="option in fsc.options"> ' +
            '{{option}}' +
            '<img ng-show="fsc.isSelectedOption(option)" style="margin-top:0px; margin-left:0px; height:10px" src="../js/thirdparty/jqwidgets/styles/images/check_black.png">' +
            '</button>'+
            '</jqx-button-group>',
    
        controller = function () {
            var fsc = this;
    
            fsc.onButtonClick = function (event) {
                fsc.updateFilter(event.args.index)
            }
    
            fsc.updateFilter = function (selectedIndex) {
                fsc.selected = selectedIndex;
                fsc.onchange({newValue: fsc.options[fsc.selected]})
            }
    
            fsc.isSelectedOption = function (option) {
                return option == fsc.options[fsc.selected]
            }
    
            fsc.jqxSettings = {
                mode: 'radio',
                theme: 'energyblue'
            }
    
            var init = function() {
                fsc.$on('jqxButtonGroupCreated', function (event, arguments) {
                    fsc.filterSelector.setSelection(2)
                })
                fsc.updateFilter(fsc.selected)
            }();
        };
    
        var app = angular.module("app")
        app.directive('filterSelector', filterSelector)
    }())
    

    Unfortunately since the controller doesn’t have access to $scope, it cannot access $scope.$on. is it possible to inject $on into the directive’s isolate scope?

    Thanks,
    David

    • This reply was modified 8 years, 4 months ago by  david.

    Dimitar
    Participant

    Hi David,

    Unfortunately, what you require cannot be achieved. The widget’s $scope cannot be accessed from your directive’s isolated scope.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.