Question

请在Plunker现场试用 - http://plnkr.co/edit/js7WOhjgKwUeElrdNwv0?p=preview

我该如何解决这个问题？与Plunker及以下的示例不同，我正在处理的指令需要一个独立的范围（或者至少当前的实现使用一个，我宁愿不重写它）。

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>

    <script>
      var app = angular.module("MyApp",[]);
      app.directive("myDirective", function(){
        return {
          //scope:{},
          link: function(){}
        };  
      });
    </script>

    <style>
      .ng-invalid{
        border: 1px solid red;
      }
    </style>
  </head>

  <body ng-app="MyApp">
    <h1>My Directive</h1>
    <p>Test the checkbox below then uncomment //scope:{} and try again.</p>
    <input type="checkbox" ng-model="isActive" />
    <input type="text" ng-model="foo" 
        my-directive 
        ng-disabled="!isActive" 
        ng-required="isActive" />
  </body>

</html>

祝你好运，汉斯

Answer 1

问题是范围适用于整个DOM元素（在这种情况下为<input>），而my-directive正在创建一个隔离范围，然后应用于ng-disabled和ng-required。隔离范围不是原型继承的封闭范围，因此isActive在其中不可见。

您可以将该范围属性映射到隔离范围，方法是将其作为隔离范围的属性显式提供，然后引用ng-required和ng-disabled的属性的本地版本。例如，在指令定义中：

scope: {
  myActive: '='
}

'='设置与该元素的my-active属性中给出的表达式的双向绑定，本地名称为myActive。

在<input>标记中：

my-directive my-active="isActive" ng-required="myActive" ng-disabled="!myActive"

my-active="isActive"将父作用域中的isActive与隔离范围中的myActive联系起来。

我updated your plunker证明了这一点。

具有隔离范围的Angular指令“中断”其他指令（ng-required，ng-disabled）

1 个答案: