Question

我有一个指令（使用一个独立的范围），它使用另一个指令来改变一个标志，因此我必须将它放入容器对象中。现在，我也希望能够从外部设置该标志。让我为你“画”这个：

outerScope (outerFlag1 = true, outerFlag2 = true)
    directiveScope (container.flag1 = false, container.flag2 = false)
        subdirectiveScope (container.flag1 = false)
        subdirectiveScope (container.flag2 = false)

directiveScope 和 subdirectiveScope 中的标志变量始终相同，因为 container 是原型继承的。现在我希望能够从外部设置它，将 outerFlagX 与 container.flagX 同步。

使用隔离的范围定义，我可以像这样映射属性：

scope: {
        outerFlag1: '=flag1'
        outerFlag2: '=flag2'
       }

但是，我需要但不允许的是

scope: {
        outerFlag1: '=container.flag1'
        outerFlag2: '=container.flag2'
       }

我怎样才能完成这项工作？

我根据Mikko提供的那个添加了一个plunker（非常感谢）：http://plnkr.co/edit/hT6Zip

Answer 1

看一个现实生活中的用例，以一个掠夺/小提琴的形式，真是太好了。仅仅通过在子伪指令中定义隔离范围，您的问题可能会消失。

鉴于您已关注controller和两个directives

// controller
app.controller('MainCtrl', function ($scope) {
  $scope.model = null;
});

// top level directive
app.directive('oneDirective', function () {
  return {
    restrict: 'E',
    scope: {
      flag: '='
    },
    template: '<label for="one">One directive</label><br>' +
              '<input type="text" name="one" ng-model="flag">' +
              '<br>' + 
              '<other-directive></other-directive>'
  }; 
});

// nested directive
app.directive('otherDirective', function () {
  return {
    restrict: 'E',
    template: '<label for="other">Other directive</label><br>' +
              '<input type="text" name="other" ng-model="flag">'
  };
});

相关的HTML模板

<body ng-controller="MainCtrl">
  <h4>Directive scopes</h4>
  <div>
    <label for="number">Parent scope</label><br>
    <input type="text" ng-model="model" placeholder="enter something..." />
    <hr>
  </div>
  <div>
    <one-directive flag="model"></one-directive>
  </div>
</body>

那会给你一些谎言

imgur

此处相关的plunker http://plnkr.co/edit/7XhG8e

Answer 2

我的问题的答案有两个部分，我的问题并不完全明显，所以道歉。

只是不要使用容器对象。（参见plunkr in my question）
虽然这在plunker中起作用，但它仍然无法在我的代码中工作。所以我把它剥了下去，直到它奏效。第二个问题是，我使用了子指令和 ng-if 。请参阅modified plunker，其中一个用法包含 ng-if ，如下所示：

<sub-directive ng-if="condition" flag="flag2"> </subdirective>

不幸的是（在这种情况下）， ng-if 创建了一个子范围，这样如果在子指令中修改了该标志，它就会在该子范围内设置一个自己的属性。像往常一样，这在父范围（原型继承）中不可用。首先单击父复选框，它按预期工作，单击子复选框将打破它。

因此，解决方案是使用 ng-show ，而不是创建另一个范围。

将属性绑定到隔离范围内的对象属性

2 个答案: