Question

每隔一段时间我就会有一些奇怪的角度，我只是难倒。无法理解为什么它不起作用。

这是我的JavaScript

angular.module('myApp',[]);


angular.module('myApp').controller('myCtrl', function($scope){
  $scope.page = { myModel : 'helloWorld' }
})

angular.module('myApp').directive('myDirective', function(){
  return {
    template: '<input ng-model="data" ng-disabled="{{disabled}}"/> {{disabled}} :: {{data}}', 
    restrict: 'A',
    scope: {
      'data' : '=',
      'disabled' : '@'
    }
  }
})

这是我的HTML

<html>

  <head>
    <script data-require="angular.js@1.2.0" data-semver="1.2.0" src="https://code.angularjs.org/1.2.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>
    <div>
      this is my model = {{page.myModel}},
      {{!page.myModel.length}}
    </div>
    <div my-directive data="page.myModel" disabled="{{!page.myModel.length}}" ></div>
  </body>

</html>

这是羽毛球：http://plnkr.co/edit/weAC6NAjChjRPYktTnfO?p=preview

我希望删除其内容后禁用输入字段。但它仍然启用。无法理解原因。

作为一种解决方法，我现在正在观看＆＃39;禁用＆＃39;在范围上并使用elem.prop('disabled', true/false)我手动更改其状态。我想摆脱这个代码并使用角度的绑定能力。

Answer 1

Demo

删除禁用ng的curlies：

angular.module('myApp').directive('myDirective', function(){
  return {
    template: '<input ng-model="data" ng-disabled="disabled"/> {{disabled}} :: {{data}}', 
    restrict: 'A',
    scope: {
      'data' : '=',
      'disabled' : '@'
    }
  }
})

Answer 2

没有禁用输入的原因是ng-disabled期望一个真正的表达式，这就是为什么像checked这样的布尔值可以完美地工作。

Click me to toggle: <input type="checkbox" ng-model="checked"><br/>
<button ng-model="button" ng-disabled="checked">Button</button>

如果将ng-disabled绑定到返回truthy值的函数，那么您将传递预期的表达式。

请参阅此codepen和下面的代码，了解包含对函数绑定的代码的修改版本。

<强>的JavaScript

angular.module('myApp',[]);

angular.module('myApp').controller('myCtrl', function($scope){
  $scope.page = { myModel : 'helloWorld' };
  console.log("myModel=" + $scope.page.MyModel);
})

angular.module('myApp').directive('myDirective', function(){
  return {
    template: '<input name="test" ng-model="data" ng-disabled="disabled()"/> {{disabledData}} :: {{data}} {{disabledData.length}}', 
    restrict: 'A',
    scope: {
      'data' : '=',
      'disabledData' : '@'
    },
   link: function (scope, element) {
      scope.disabled = function(e){ 
                    if (scope.disabledData == 'true')
                return true;
                    else
                return false;
       };
    }
  }
})

<强> HTML

<div ng-app="myApp" ng-controller="myCtrl">
    <h1>Hello Codepen!</h1>
    <div>
      this is my model = {{page.myModel}},
      {{!page.myModel.length}}
    </div>
  <div my-directive data="page.myModel" disabled-data="{{!page.myModel.length}}" ></div>
</div>

为什么此输入未被禁用？

2 个答案: