Fatal编程技术网
  • angularjs/
  • Angularjs 角度指令转移创建新范围？

Angularjs 角度指令转移创建新范围？

angularjs

Angularjs 角度指令转移创建新范围？,angularjs,angularjs-directive,angularjs-scope,Angularjs,Angularjs Directive,Angularjs Scope,我正在尝试为模态窗口创建指令组件，它负责模态行为，例如打开、关闭、处理zIndex等 模态分量的内容由控制器控制。 到目前为止，这个主意不错，但当我尝试 <modal ng-controller="MyController"> Some content which will be transcluded with dynamic {{value}} from MyController </modal> 有没有办法，如何让第一个例子起作用，或者这是不可能的，为什么要这

我正在尝试为模态窗口创建指令组件，它负责模态行为，例如打开、关闭、处理zIndex等

模态分量的内容由控制器控制。 到目前为止，这个主意不错，但当我尝试

<modal ng-controller="MyController">
  Some content which will be transcluded with dynamic {{value}} from MyController
</modal>
有没有办法，如何让第一个例子起作用，或者这是不可能的，为什么要这样做

最后是plunker的完整示例

var app = angular.module('plunker', []);
app.directive("modal", function() {
  return {
    restrict:'E',
    replace:true,
    transclude:true,
    scope: false,
    template:'<div class="modal">Modal scope {{$id}}<div ng-transclude></div></div>',
    link: function($scope) {
      console.log("directive scope ", $scope.$id)
    }
  }  
})

app.controller('DetailControl', function($scope, $location) {
  console.log("controller scope ", $scope.$id)
  $scope.name = 'World';
});

var-app=angular.module（'plunker'，[]）；
应用指令（“模态”，函数（）{
返回{
限制：'E'，
替换：正确，
是的，
范围：假，
模板：'Modal scope{{$id}}'，
链接：功能（$scope）{
log（“指令范围”，$scope.$id）
}
}  
})
app.controller（'DetailControl'，函数（$scope，$location）{
log（“控制器范围”，$scope.$id）
$scope.name='World'；
});
这个HTML

<body>
main scope {{$id}}

Controller on same element as modal<br>

<modal ng-controller="DetailControl">
  <div>
    content scope (transclude) {{$id}}<br>
    Some content of modal window. The name is {{name || '-unknown-'}}
  </div>
</modal>

Controller outside modal
<div ng-controller="DetailControl">
  Controller scope {{$id}}
  <modal>
    <div>
      content scope (transclude) {{$id}}<br>
      Some content of modal window. The name is {{name || '-unknown-'}}
    </div>
  </modal>
</div>
<body>


主作用域{{$id}
控制器位于与modal相同的元件上

内容范围（transclude）{{$id}}

模态窗口的一些内容。名称为{{name | |'-未知-'}}
控制器外部模态
控制器作用域{{$id}
内容范围（transclude）{{$id}}

模态窗口的一些内容。名称为{{name | |'-未知-'}}
以下是plunker

尝试在传递范围内使用transclude：

transcludeFn->scope

“transcludeFn-一个预先绑定到正确的转换作用域的转换链接函数。该作用域可以由可选的第一个参数覆盖。这与指令控制器的$transclude参数相同。函数（[scope]，cloneLinkingFn）。”

问题是指令创建了自己的作用域。执行
操作时，
ngController
作用域是
modal
的同级，因此
modal
无法（从某种意义上说）查看该控制器

当
ngController
是父级时，它工作，因为您正在使用
scope:false
，这会导致指令从父级继承其作用域

您可以将控制器附加到指令上，而不是使用单独的
ngController
指令：

  app.directive("modal", function() {
    return {
      controller: function($scope, $location) {
        console.log("controller scope ", $scope.$id)
        $scope.name = 'World';
     }
  }
这种方法将为您的指令提供良好的封装，因为它不再依赖于外部控制器——这很好。一个优点是，您不再需要协调多个作用域

如果需要多个指令进行通信，可以使用允许多个指令共享对一个父指令控制器的访问。这是Angular内部采用的方法（例如在中）

您可以尝试将其应用于Plunker吗？我不知道这对我来说解决了一个长期存在的问题意味着什么。如果可以的话，我会不止一次投票！谢谢你，丹尼尔！我理解这种访问，但我需要从许多不同的应用程序位置控制modal的内容。您能举一个
要求
不能解决的例子吗？有了更多的细节，我可以给你们一个更细粒度的答案。我已经在整个应用程序的很多地方找到了模态。它们内部有不同的逻辑。从简单的内容模式到复杂的形式和逻辑。这就是为什么我希望模态指令只是封装了打开/关闭的行为，业务逻辑在许多不同的控制器中。简言之：Modal对内容一无所知。Angular建议在服务/提供商内部使用业务逻辑。如果是我，我会朝这个方向看。如果你还没看过的话，Angular团队有一段很棒的视频讨论了这一点-

  app.directive("modal", function() {
    return {
      controller: function($scope, $location) {
        console.log("controller scope ", $scope.$id)
        $scope.name = 'World';
     }
  }