Scope 004           <-- scope of the body
    Scope 005       <-- scope of directive container1
    Scope 006       <-- scope of the ng-transclude

我期望：

Scope 004            <-- scope of the body
    Scope 005        <-- scope of the directive
         Scope 006   <-- scope of the ng-transclude

如果同一个指令有一个共享作用域而不是一个孤立的作用域，我得到预期的结果。

这使我有一个问题，因为如果被转录的内容包含另一个指令(component1)与一个孤立的范围，我得到：

Scope 004             <-- scope of the body
    Scope 005         <-- scope of the directive
    Scope 006         <-- scope of the ng-transclude
          Scope 007   <-- scope of directive component1

我想使用像这样的指令：

<container1>
   <component1 data="objectExposedInContainer1"/>
</container1>

但是这不工作，在component1内部，$ scope.data是未定义的，因为objectExposedInContainer1不在正确的范围。

我有两个问题：

>为什么ng-transclude的范围不是它的指令范围的子元素，如果指令有一个孤立的范围？这是一个错误？
>如果它不是一个错误，容器指令如何传递数据到它的内容，如果不是通过设置属性，如我试过。

这里是一个不工作的示例：http://plnkr.co/edit/NDmJiRzTF9e5gw8Buht2?p=preview.因为Plunker是用Anguar构建的，所以很难用Batarang进行调试。我建议在本地下载代码。注释掉app.js的第10行，以使其使用共享作用域。

Why ng-transclude’s scope is not a child of its directive’s scope if the directive has an isolated scope?

ng-transclude旨在允许指令使用任意内容，隔离的范围旨在允许指令封装其数据。

如果ng-transclude没有保留这样的范围，那么任何被转录的任何内容都需要知道指令的实现细节(即它需要知道你创建的孤立范围上的可用内容)。

If it’s not a bug,how can a container directive pass data to it’s content,if not by setting attributes like I tried.

如果容器指令和包含的指令是耦合的 – 即你写了它们并且需要他们一起行动，那么它们应该通过共享控制器通信。

如果容器指令应该将内容注入到孩子的范围内(例如ng-repeat)，那么你不应该使用一个孤立的范围。

角度文档很清楚的是什么行为应该是：

“In a typical setup the widget creates an isolate scope,but the transclusion is not a child,but a sibling of the isolate scope. This makes it possible for the widget to have private state,and the transclusion to be bound to the parent (pre-isolate) scope.”

这在1.0中工作,但是Angular 1.2现在在尝试执行此操作时会生成错误

Multiple directives asking for new/isolated scope

基于项目git历史出现Angular 1.2更改行为,以保持两个隔离的指令在同一元素上分开.这是一件好事,当在同一元素上放置两个“Attribute”指令时,它可以正常工作.

即

<div my:directive="myDirectiveData" my:other-directive="myOtherDirectiveData" />

像你期望的那样工作.

然而

<my:directive my:directive-data="myDirectiveData" my:other-directive="myOtherDirectiveData" />

引发上述错误. (多个指令要求新/隔离范围)

在这种情况下,我希望每个指令仍然与它们自己的非共享隔离范围并行存在.

这在Angular 1.2中仍然可行吗？

  Scenario  directive #1   directive #2   Result
     1      no new scope   no new scope   Both directives use the controller's scope.
                                          (This should be obvIoUs.)
     2      new scope      new scope      Both directives share one new child scope.
     3      new scope      no new scope   Both directives share one new child scope.
                                          Why does dir #2 use the child scope?
                                          This seems odd to me.
     4      isolate scope  no new scope   Angular v1.0: both directives share the
                                          isolate scope.
                                          Angular v1.2+: dir #1 uses the isolate scope,dir #2 uses the controller's scope.

请注意,不允许以下方案(Angular引发错误)：

  Scenario  directive #1   directive #2
     5      isolate scope  new scope
     6      isolate scope  isolate scope

angular.module('app').directive('googlePlace',function () {
    return {
        restrict: 'A',require: 'ngModel',link: function ($scope,element,attributes,model) {

              $scope.property1 = 'some val';
              $scope.property2 = 'another val'; 
              $scope.$apply();

    };
});

但在我的控制器中我这样做：

MyCtrl = function($scope){
$scope.doSave = function(){
   // do some logic
   console.log($scope.property1);
   console.log($scope.property2);


}

}

当doSave运行时,我在控制台中得到未定义的值.如何在不隔离范围的情况下将其应用于父节点范围.我没有此选项,因为同一元素上的另一个指令隔离了作用域.

例如

angular.module('app').directive('googlePlace',scope: {
            property1: '=',property2: '='
        }
        link: function ($scope,model) {

            //here you have access to property 1 and 2

    };
});

function MyCtrl($scope) {
    $scope.property1 = null;
    $scope.property2 = null;

    $scope.doSave = function(){
   // do some logic
       console.log($scope.property1);
       console.log($scope.property2);
    }
}

还有你的HTML

<div ng-control="MyCtrl">
<div google-place property1='property1' property2='property2'></div>
</div>

app.directive('withIf',function(){
    return {
        restrict: 'E',scope: {
            title: '@'
        },transclude: true,template: '<div>' +
        '<p ng-click="visible = !visible">{{title}}</p>' +
        '<div ng-if="visible" ng-transclude></div>'+
        '</div>',link: function(scope){
            scope.visible = false;
        }
    }
});

解决方法

例如,如果我有一个元素的两个指令

<eDirective aDirective prop="parentProp"/>

一个指令定义了一个带有绑定属性的隔离范围

App.directive('eDirective',function() {
  return {
    restrict: 'E',scope: {
      localProp: '=prop'
    },...
  };
});

其他指令是否获得该范围,并且可以使用绑定属性？

App.directive('aDirective',function() {
  return {
    restrict: 'A',link: function postLink(scope,element,attrs) {
        scope.$watch('localProp',function(newProp,oldProp) {
          ...
        }
    },...
  };
});

我的初始尝试(几乎编码如上)失败了.

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <Meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div e-directive config="parentConfig" a-directive></div>
  </body>

</html>

和javascript：

var app = angular.module('plunker',[]);

app.controller('MainCtrl',function($scope) {
  $scope.parentConfig = {};
});

app.controller('ECtrl',function ( $scope ) {
  this.setProp = function(newProp){$scope.config.prop = newProp;};

  $scope.$watch('config',oldProp) {
    console.log(oldProp,newProp);
  });
});

app.directive('eDirective',scope: {
      config: '='
    },controller: 'ECtrl',link: function(scope,attrs) {
      scope.config.prop ="abc";
    }
  };
});

app.directive('aDirective',require: 'eDirective',attrs,ctrl) {
        ctrl.setProp("def");
    }

  };
});