Question

我在tutorial之后使用wizard-form进行ui-router。

目前我试图这样做：

HTML：

<div id="status-buttons-wizard" class="text-center">
   <a ui-sref-active="active" ui-sref=".item"> <span></span>Item</a>
   <a ng-class="{ disabled: !ItemCheckPass, enabled: ItemCheckPass}" ui-sref-active="active" ui-sref=".location"><span></span>Location</a>
   <a ng-show="!IsAuthenticated" ui-sref-active="active" ui-sref=".account"><span></span>Account</a>
   <a ui-sref-active="active" ui-sref=".social"><span></span>Social</a>
</div>

.disabled {
    cursor: not-allowed;
    opacity: .5;
    pointer-events: none;
}
.enabled {
    cursor: pointer;
    opacity: 1;
    pointer-events: all;
}

检查已解雇：

<a ui-sref="post_add.location" class="btn btn-orange" ng-class="{disabled: addItem_form.$invalid}" ng-click="itemCheck()">Continue <span class="glyphicon glyphicon-circle-arrow-right"></span></a>

JS：

//data checks
$scope.ItemCheckPass = false;
$scope.itemCheck= function(){
    if(typeof $scope.AddItem === 'undefined' || $scope.AddItem == null){return false;}
    if(typeof $scope.AddItem.title === 'undefined' || $scope.AddItem.title == null){return false;}
    if(typeof $scope.AddItem.descr === 'undefined' || $scope.AddItem.descr == null){return false;}
    if(typeof $scope.AddItem.category === 'undefined' || $scope.AddItem.category == null){return false;}
    if(typeof $scope.AddItem.subcategory === 'undefined' || $scope.AddItem.subcategory == null){return false;}
    if(typeof $scope.AddItem.email === 'undefined' || $scope.AddItem.email == null){return false;}
    if(typeof $scope.AddItem.price === 'undefined' || $scope.AddItem.price == null){return false;}
    $scope.ItemCheckPass = true;
    return true;
}

一切都运作良好。正如您所看到的，我尝试根据条件更改标记<a>的类，并且由于未知原因，ng-class在更改类时不会更改类$scope.ItemCheckPass (boolean)更改。

可能有什么问题？

OR

禁用更改用户的步骤的更好方法是什么？

Answer 1

I believe the problem is that your class declarations are not inside of <style> tags. I tried it on my machine and it worked fine.

So you'll change:

.disabled {
    cursor: not-allowed;
    opacity: .5;
    pointer-events: none;
 }
.enabled {
    cursor: pointer;
    opacity: 1;
    pointer-events: all;
}

to this:

<style>
    .disabled {
        cursor: not-allowed;
        opacity: .5;
        pointer-events: none;
     }
    .enabled {
        cursor: pointer;
        opacity: 1;
        pointer-events: all;
    }
</style>

Answer 2

问题是每次状态初始化时，控制器上的变量都会被更新。

解决方案是按照以下方式进行路由：

    .state('post_add', {
        url: '/post_add',
        templateUrl: '/view/post_wizard/form.html',
        controller: 'postWizardMainController',
        abstract:true
    })
    .state('post_add.item', {
        url: '',
        templateUrl: '/view/post_wizard/form-item.html',
        controller: 'postWizardController'
    })
    .state('post_add.location', {
        url: '/location',
        templateUrl: '/view/post_wizard/form-location.html',
        controller: 'postWizardController'
    })
    .state('post_add.account', {
        url: '/account',
        templateUrl: '/view/post_wizard/form-account.html',
        controller: 'postWizardController'
    })
    .state('post_add.social', {
        url: '/social',
        templateUrl: '/view/post_wizard/form-social.html',
        controller: 'postWizardController'
    })
    .state('post_add.success', {
        url: '/success',
        templateUrl: '/view/post_wizard/form-success.html',
    });

并将检查变量和方法放在postWizardMainController。

中

当条件发生变化时，AngularJS ng-class不会改变

2 个答案: