AngularJS：在指令內設置ng-readonly變量爲true不起作用

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爲真 - 現場仍然不是隻讀 - 我很困惑，爲什麼不。

Answer 1

您必須在您的指令的tempalte集合ng-readonly的視圖中添加等於父範圍作爲您的input元素的屬性之一。

就像這樣：

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

然後在myInput.tpl.html找到你input element和補充一點：

<input ng-readonly="readOnly">