如果指令的独立作用域变量被包装在一个在其模板中启用了 ng-if 和 transclusion 的指令中，则它是未定义的 [英] Directive's isolated scope variables are undefined if it is wrapped in a directive which has in its template ng-if and tranclusion enabled

问题描述

我面临的问题如下例所示:

http://jsfiddle.net/nanmark/xM92P/

你好，{{name}}！<div my-wrapper-directive><div my-nested-directive nested-data="nameForNestedDirective"></div>

var myApp = angular.module('myApp', []);myApp.controller('DemoCtrl',['$scope', function($scope){$scope.name = 'nadia';$scope.nameForNestedDirective = 'eirini';}]).directive('myWrapperDirective', function(){返回 {限制:'A'，范围: {}，转置:真实，模板:<div ng-if='isEnabled'>你好，<div ng-transclude></div></div>",链接:功能(范围，元素){scope.isEnabled = true;}}}).directive('myNestedDirective', function(){返回 {限制:'A'，范围: {嵌套数据:'='},模板:'<div>{{nestedData}}</div>',};});

我想创建一个指令 (myWrapperDirective)，它将包装许多其他指令，例如我的示例中的myNestedDirective".'myWrapperDirective' 应该根据 ng-if 表达式的值来决定是否显示其内容，但如果内容是一个像 'myNestedDirective' 这样具有独立作用域的指令，那么 'myNestedDirective' 的作用域变量 'nestedData' 是未定义的.

解决方案

问题在于双重嵌套的隔离作用域.您看，您正在使用 nameForNestedDirective 变量，该变量在外部作用域中定义，与内部作用域隔离.这意味着它不继承这个变量，因此undefined被传递给嵌套指令.

一张图来解释:

外部作用域 - DemoCtrl- 定义:名称- 定义:nameForNestedDirective+ 用途:名称内部隔离范围 1 - myWrapperDirective- 定义:(无)- 继承:(没有！ - 它是孤立的)+ 用途:(无)* 将nestedData=nameForNestedDirective 传递给nested 指令，但是nameForNestedDirective 在这里未定义！内部隔离范围 2 - myNestedDirective- 定义:nestedData(来自范围定义)- 继承:(没有！ - 它是孤立的)+ 使用嵌套数据

您可以通过注释掉包装器指令的范围定义来说服自己这是这种情况(hello eirini"按预期显示):

.directive('myWrapperDirective', function(){返回 {...//范围: {}，...

我不确定包装器指令是否真的需要有一个独立的作用域.如果没有，也许删除隔离范围会解决您的问题.否则，您将不得不:

1. 首先将数据传递给包装器，然后传递给嵌套指令
2. 将数据传递给包装器指令，为其编写一个暴露数据的控制器，然后要求嵌套指令中的包装器控制器.

I am facing is an issue which is demonstrated in the following example:

http://jsfiddle.net/nanmark/xM92P/

<div ng-controller="DemoCtrl">
  Hello, {{name}}!
    <div my-wrapper-directive>
        <div my-nested-directive nested-data="nameForNestedDirective"></div>

    </div>
</div>

var myApp = angular.module('myApp', []);
myApp.controller('DemoCtrl',['$scope', function($scope){
    $scope.name = 'nadia';
    $scope.nameForNestedDirective = 'eirini';
}])
.directive('myWrapperDirective', function(){
    return {
        restrict: 'A',
        scope: {},
        transclude: true,
        template: "<div ng-if='isEnabled'>Hello, <div ng-transclude></div></div>",
        link: function(scope, element){
            scope.isEnabled = true;
        }
    }
})
.directive('myNestedDirective', function(){
    return {
        restrict: 'A',
        scope: {
            nestedData: '='
        },
        template: '<div>{{nestedData}}</div>',

    };

});

I want to create a directive (myWrapperDirective) which will wrap many other directives such as 'myNestedDirective of my example. 'myWrapperDirective' should decide if its content will be displayed or not according to ng-if expression's value, but if contents is a directive like 'myNestedDirective' with an isolated scope then scope variable 'nestedData' of 'myNestedDirective' is undefined.

解决方案

The problem is with the double-nested isolated scopes. You see, you are using the nameForNestedDirective variable, defined in the outer scope from the inner scope which is isolated. This means it does not inherit this variable, thus undefined is passed to the nested directive.

A diagram to explain:

Outer scope - DemoCtrl
    - Defines: name
    - Defines: nameForNestedDirective
    + Uses: name

    Inner isolated scope 1 - myWrapperDirective
        - Defines: (nothing)
        - Inherits: (NOTHING! - It is isolated)
        + Uses: (nothing)
        * Passes nestedData=nameForNestedDirective to nested directive, but
          nameForNestedDirective is undefined here!

        Inner isolated scope 2 - myNestedDirective
            - Defines: nestedData (from scope definition)
            - Inherits: (NOTHING! - It is isolated)
            + Uses nestedData

You can convince yourself this is the case by commenting out the scope definition of the wrapper directive ("hello eirini" is displayed as expected):

.directive('myWrapperDirective', function(){
    return {
        ...
        //scope: {},
        ...

I am not sure if the wrapper directive really needs to have an isolated scope. If it doesn't, maybe removing the isolated scope will solve your problem. Otherwise you will have either to:

1. Pass the data first to the wrapper and then to the nested directives
2. Pass the data to the wrapper directive, write a controller for it that exposes the data and then require the wrapper controller from the nested directive.

这篇关于如果指令的独立作用域变量被包装在一个在其模板中启用了 ng-if 和 transclusion 的指令中，则它是未定义的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！