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

更改angularJS指令中的值后，按钮无法启用

1 个答案: