2

请在 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>

最好的问候，汉斯

4

1 回答 1

7

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

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

scope: {
  myActive: '='
}

my-active'='使用本地名称设置到该元素属性中给定表达式的 2 路绑定myActive。

在<input>标签中：

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

my-active="isActive"isActive父范围内的关系myActive与隔离范围内的关系。

我已经更新了你的 plunker 来证明这一点。

于 2013-08-13T04:03:29.223 回答