Question

（使用棱角和打字稿）我有一个切换开关指令：

    return {
        restrict: 'E',
        scope: {
            ngModel: '=',
            onText: '@',
            offText: '@',
            title: '@',             
        },
        template:
        '<label class="switch-light well">' +
        '  <input type="checkbox" ng-model="ngModel">' +
        '  <span>' +
        '    {{title}}' +
        '    <span class="switch-light-option" ng-class="{ \'switch-light-checked\': !ngModel}">{{offText}}</span>' +
        '    <span class="switch-light-option" ng-class="{ \'switch-light-checked\': ngModel}">{{onText}}</span>' +
        '  </span>' +
        '  <a class="btn btn-primary"></a>' +
        '</label>'
    };

在我的html中，我将其用作：

toggle-switch ng-model="myValues" on-text="Enabled" off-text="Disabled"

现在我要禁用上面的那个。我该怎么办

我对角度很新，所以任何输入都会受到赞赏。

由于

Answer 1

尝试将链接代码添加到您的指令中：

link: function ($scope, element, attrs) {
           $scope.somethingDisabled = true;
        };

并在您的html部分ng-disabled = somethingDisabled

中

然后你要做的只是通过将它作为指令attr值或控制器范围传递给链接函数添加如何以及何时禁用它。

有道理吗？

<强> EDIT2

根据要求，我做了一些只能展示概念证明的东西...... 这里是plunker .. plunker

 link: function ($scope) {
$scope.myclick = function(elem){
 setTimeout(function(){$scope.disabled = true;},0);
  setTimeout(function(){
    $scope.disabled=false;
    alert('db call done');
  },2000);
};

} 我修复了越野车代码可能仍然有点丑陋但我会留给你来美化它...第二个超时是数据库调用...首先是将禁用推到堆栈的末尾，这样你就可以了看动画。

如果你想要你也可以在ng-disabled中使用！ngModel，然后在db调用返回时更改ngModel的值..

祝你好运

Answer 2

使用：

<toggle-switch
   ng-model="switchStatus"
   is-disabled="true">
</toggle-switch>

http://jumplink.github.io/angular-toggle-switch/

Answer 3

我遇到同样的问题，并且使用了禁用属性：

<toggle-switch  label-text="'Enable Internet Cash'" label-position="'top-center'" disabled="MyBankAccount.HasMoney"></toggle-switch>

disabled属性接收一个布尔表达式。如果disable属性具有true值，它将禁用toogle-switch，否则将启用toggle-switch。

考虑到js文件中有$ scope.MyBankAccount和$ scope.MyBankAccount是具有HasMoney属性的json对象。

Angular js - 禁用切换开关

3 个答案: