jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Hristo 9 years, 2 months ago.

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

Author

ngDisabled Watcher Posts

March 24, 2016 at 10:14 am ngDisabled Watcher #82794

Participant

Hi,

We are encountering TypeError exceptions when dynamically compiling HTML templates containing jqWidgets. It seems this exception is related to angular watchers on the ngDisabled directive. Do we need additional steps to destroy these watchers when the widgets are removed from the DOM?

I have included a simple angular application to illustrate this below. To observe the exception please just continually clear and load content using the provided buttons. You should notice TypeErrors that have stack traces pointing to ngDisabled watchers from previously removed widgets.

Thanks

<!DOCTYPE html>
<html>

  <head>
    <link href="jqx.base.css" rel="stylesheet" />
    <link href="jqx.arctic.css" rel="stylesheet" />
  </head>

  <body ng-app="test">
    <div ng-controller="MainController as main" style="width:1000px;height:600px;">
      <container></container>
      <button ng-click="main.clear()">Clear Content</button>
      <button ng-click="main.load()">Load Content</button>
    </div>
    
    <script src="jquery-1.11.1.min.js"></script>
    <script src="angular.min.js"></script>
    <script src="jqx-all.js"></script>
    <script src="jqxangular.js"></script>
    
    <script>
        var isDisabled = true;
        setInterval(function(){
            isDisabled = !isDisabled;
        }, 200);

        var app = angular.module('test', ["jqwidgets"]);
        app.controller('MainController', ['$compile', '$scope', function($compile, $scope){
            var vm = this;
            
            $scope.click = function(command){
                console.log(command.name + ' clicked');
            }
            $scope.settings = {
                btn: {theme: 'arctic', width: 50, height: 50, disabled: false}
            }
            $scope.isReadOnly = function(){
                return isDisabled;
            }
        
            vm.clear = function(){
                panel.clearcontent();
            };
            vm.load = function(){
                $scope.commands = [
                    {name:'cmd1'},
                    {name:'cmd2'},
                    {name:'cmd3'}
                ]
                var html =  "<div ng-repeat=\"command in commands\">";
                html += "<jqx-button jqx-settings=\"settings.btn\" ng-click=\"click(command)\" ng-disabled=\"isReadOnly()\">{{command.name}}<\/jqx-button><\/div>";
                panel.append(html);
                $compile(panel.content)($scope);
            };
        }]);

        app.directive('container', [function(){
            
            function link(scope, element, attrs){      
                element.jqxPanel({
                    width: 50,
                    height: 50,
                    theme:'arctic',
                    autoUpdate:true
                });
                panel = element.jqxPanel('getInstance');
            }
            
            return {
                restrict: 'AE',
                scope: true,
                link: link,
                template: '<div id="panel" style="font-size:13px; font-family:Verdana; float:left;">Initial content.........</div>'
            }
        }]);
    </script>
  </body>

</html>

March 30, 2016 at 8:11 am ngDisabled Watcher #82994

Hristo

Participant

Hello patrick.fay,

Thank you for the feedback.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.