button not enabling after changing value from angularJS directive

Question

Basically i got an AngularJS directive with a button and a selectable list (jquery-UI).

The button is disabled with ng-disabled="disabledButton".

disabledButton is a variable in the controller $scope.disabledButton = true;

Now, in the directive, after i click on an element in the list, i want to set the disabledButton to false so the button will be activated.

Here's my HTML code:

<div class="modal-wrapper">
    <div panels test-data="testData" disable-button='disableButton'></div>

    <div class="bottom-buttons">
        <button ng-disabled="disableButton" class="btn btn-primary btn-wizard" ng-click="alertSelected()">NEXT</button>
    </div>
</div>

And my directive's code:

portfolioApp.directive('panels', function($timeout) {
    return {
        restrict: 'A',
        replace: true,
        templateUrl: 'templates/paneltemplate.htm',
        scope: {
            testData: "=",
            disableButton: "@"
            //selectedList: "@"
        },
        controller: function($scope) {
            $scope.selectedList = [];

            $scope.clearList = function() {
                $scope.selectedList.length = 0;
            }
        },
        link: function($scope, element, attrs, panelsController) {
            $timeout(function() {
                if(!$scope.$$phase) {
                    $('#selectable').selectable( {
                        filter: "li",
                        selected: function(event, elem) {

                            // this will return the first of the selecteds
                            var selecteds = $('#selectable').find('.ui-selected').children().eq(0).children().text();

                            $scope.selectedList.push(selecteds);
                            console.log($scope.selectedList);

                            $scope.$apply(function() {
                                $scope.disableButton = false;
                            });

                            console.log('look im being selected!')
                        },
                        unselected: function(event, ui) {
                            $scope.clearList();
                        }
                    }); 
                    $scope.$apply();
                }
            },0);           
        }
    }
})

replace $scope.$watch with $scope.$apply

KoIIIeY
– KoIIIeY

2013-12-26 06:07:21 +00:00
Commented Dec 26, 2013 at 6:07 — KoIIIeY
– KoIIIeY, Commented Dec 26, 2013 at 6:07

KoIIIeY · Accepted Answer · 2013-12-26 06:08:17Z

1

link: function(scope, element, attrs) {
        $timeout(function() {
            if(!scope.$$phase) {
                $('#selectable').selectable( {
                    filter: "li",
                    selected: function(event, elem) {

                        scope.$apply(function() {
                            scope.disableButton = false;
                        });
                        console.log('look im being selected!')
                    }
                }); 
            }
        },0);           
    }

answered Dec 26, 2013 at 6:08

KoIIIeY

5581 gold badge8 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

KoIIIeY Over a year ago

your code do nothing, because $scope.$watch only monitors value in scope for change.

user3078876 Over a year ago

i've added another thing to my code, i'm pretending to do the same, returns an array of selected objects to the controller... i was trying to use a inner controller in the directive, but im not able to see it from the parent controller, maybe i should add a $broadcast/$emit? would be a nice idea right?

KoIIIeY Over a year ago

if you can, create fiddle. may be you can rewrite your code with ng-click='enableButton();' in every li, and in controller scope.enableButton = function(){ scope.disableButton = false; }

KoIIIeY Over a year ago

in this way you can delete link function

user3078876 Over a year ago

mmm no i can't :( isn't there a way to do it from the directive then? :S

Collectives™ on Stack Overflow

button not enabling after changing value from angularJS directive

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related