Question

大家可能会发现这个问题已经得到解答，但我相信我已经尝试了所有可用的解决方案。所以我有一个使用ng-disabled禁用的按钮。 $ scope中有一个变量，当变量发生变化时，我希望ng-disabled属性发生变化。但这不会发生

<button role="buttton" class="btn btn-lg btn-success pull-right" ng-disabled="isDisabled == 'true'" id="next">Next</button>


   app.controller('goalpathController', ['$scope', '$progress', function($scope, $progress){

    $scope.isDisabled = 'true';
    $scope.prog = $progress.getProgress() * 25;
    console.log($scope);
    var isAdvancedUpload = function(){
        var div = document.createElement('div');
        return ( ( 'draggable' in div ) || ( 'ondragstart' in div && 'ondrop' in div ) ) && 'FormData' in window && 'FileReader' in window;
    }();


    var forms = document.querySelectorAll('form');
    Array.prototype.forEach.call(forms, function(form){

        var input = form.querySelector('input[type="file"]');

        var dropBox = form.querySelector('.box');
        console.log(dropBox);


        var errorMsg = form.querySelector('.box__error span');

        var restart = form.querySelectorAll('.box__restart');

        var droppedFiles = false;
        //for invoking the event listeners on the form
        triggerFormSubmit = function(){
            var event = document.createEvent('HTMLEvents');
            event.initEvent('submit', true, false);
            form.dispatchEvent(event);
        };

        //hidden button which is used for form submission
        var ajaxFlag = document.createElement('input');
        ajaxFlag.setAttribute('type', 'hidden');
        ajaxFlag.setAttribute('name', 'ajax');
        ajaxFlag.setAttribute('value', 1);
        form.appendChild(ajaxFlag);

        //automatically submit the form on file select
        input.addEventListener('change', function(e){
            console.log(e.target.files);
            droppedFiles = e.target.files;
            triggerFormSubmit();
        })

        if(isAdvancedUpload){

            dropBox.classList.add('has-advanced-upload');
            [ 'drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop' ].forEach(function( event ){
                    dropBox.addEventListener( event, function( e )
                    {
                        // preventing the unwanted behaviours
                        e.preventDefault();
                        e.stopPropagation();
                    });
            });
            [ 'dragover', 'dragenter' ].forEach( function( event ){
                    dropBox.addEventListener( event, function()
                    {
                        dropBox.classList.add( 'is-dragover' );
                    });
            });
            [ 'dragleave', 'dragend', 'drop' ].forEach( function( event ){
                    dropBox.addEventListener( event, function()
                    {
                        dropBox.classList.remove( 'is-dragover' );
                    });
            });
            dropBox.addEventListener('drop', function( e ){
                    droppedFiles = e.dataTransfer.files; // the files that were dropped
                    triggerFormSubmit();

            });
        }
        form.addEventListener('submit', function(e){
           //preventing the multiple file loading at the same time
            if(dropBox.classList.contains('is-uploading')){
                return false;
            }

            dropBox.classList.add('is-uploading');
            dropBox.classList.remove('is-error');

            if(isAdvancedUpload){
                e.preventDefault();

                var ajaxData = new FormData();


                if(droppedFiles){
                    Array.prototype.forEach.call(droppedFiles, function(file){

                        ajaxData.append(input.getAttribute('name'), file);
                        console.log(file);
                        for(var pair of ajaxData.entries()){
                        console.log(pair[0] + " " +  pair[1]);
                }

                    });
                }

                //ajax request
                var ajax = new XMLHttpRequest();

                ajax.open(form.getAttribute('method'), form.getAttribute('action'), true);


                ajax.onload = function(){
                    dropBox.classList.remove('is-uploading');
                    if(ajax.status >= 200 && ajax.status < 400){
                        var data = JSON.parse(ajax.responseText);

                        console.log(data);
                        form.classList.add(data.success == true ? 'is-success' : 'is-error');

                        if(data.success){

                            $progress.incrementProgress();
                            $scope.prog = $progress.getProgress() * 25;
                            $scope.isDisabled = 'false';

                            var bar = document.getElementById('progressBar');
                            var btn = document.getElementById('next');


                            bar.setAttribute('aria-valuenow', $scope.prog);
                            bar.style.width=$scope.prog + '%';

                            console.log(bar);
                            console.log(btn);
                            console.log($scope);
                        }

                        if(!data.success){
                            errorMsg.textContent = data.error;
                        }
                    }
                     else{
                            alert('Error. Please, contact the webmaster!');
                    }
                }

                ajax.onerror = function(){
                    form.classList.remove('is-uploading');
                    alert('Error. Please try again!');
                }
                ajax.send(ajaxData);
            }

        });
    })
}])

如果你查看底部，我正在发出ajax请求，当满足ajax请求时，我正在更改isDisabled变量的值，并且基于此我希望我的ng-disabled指令有所不同。但这种情况并没有发生，按钮正在保持原状。

Answer 1

每当您更新角度模型时，都需要在摘要中。大多数时候angular会尝试为你做这个，但你已经创建了自己的ajax回调，Angular一无所知。

private async void Button_Click(object sender, RoutedEventArgs e)
        {
            var position = await LocationManager.GetPosition();

            RootObject myWeather = await OpenWeatherMapProxy.GetWeather(position.Coordinate.Latitude, position.Coordinate.Longitude);

            ResultTextBlock.Text =  ((int)myWeather.main.temp).ToString()+ "°C" + " - " + myWeather.weather[0].description;
        }

可能很棒

ajax.onload = function(){
    //...
};

这将触发摘要周期，因此视图实际上会响应模型中的更改。

无法使用ng-disabled指令

1 个答案: