从 angularJS 指令更改值后按钮未启用

Question

基本上，我得到了一个带有按钮和可选列表 (jquery-UI) 的 AngularJS 指令。

使用 ng-disabled="disabledButton" 禁用按钮。

disabledButton是控制器$scope.disabledButton = true;中的一个变量

现在，在指令中，单击列表中的元素后，我想将 disabledButton 设置为 false，以便激活按钮。

这是我的 HTML 代码：

<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>

还有我的指令代码：

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);           
        }
    }
})

Answer 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);           
    }