jQuery UI Widgets Forums Plugins AngularJS ngDisabled Watcher

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • ngDisabled Watcher #82794

    patrick
    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>
    ngDisabled Watcher #82994

    Hristo
    Participant

    Hello patrick.fay,

    Thank you for the feedback.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.