Question

我为输入创建了一个自定义指令。在HTML内部，它使用如下： <my-input class="input-text" type="number" ng-model="modelVariable" ng-readonly="false" />

现在在指令myInput.js中我有这样的东西：

var myInputDirective = (function() {
directives.directive('myInput', [function() {
return {
  restrict: 'E',
  transclude: 'element',
  replace: true,
  require: 'ngModel',
  templateUrl: 'app/templates/common/myInput.tpl.html',
  scope: {
    ngModel: '=',
    ngReadonly: '='
  },

  link: function($scope, $element, $attr, ngModelController) {

    $scope.$watch('ngModel', function(newValue, oldValue) {
      if (newValue != oldValue && newValue !== undefined && newValue !== null) {
        $scope.ngReadonly = isReadOnly($attr.ngModel);
      }
    });

然而，尽管这会将$ scope.ngReadonly设置为true - 该字段仍然不是只读 - 我很困惑为什么不这样做。

Answer 1

您必须在指令的视图中添加tempalte set ng-readonly等于父范围作为input元素的属性之一。

就像这样：

return {
  //..the other properties
  scope: {
    ngModel: '=',
    ngReadonly: '=readOnly'
  }

然后在myInput.tpl.html找到您的input element并添加此内容：

<input ng-readonly="readOnly">

AngularJS：将ng-readonly变量设置为true inside指令不起作用

1 个答案: