Javascript angularjs嵌套指令作用域隔离隐藏父指令对象

我想创建顺序为top、parent和sub的嵌套指令

<div ng-app="app">
  <top>
    <parent>
        <sub global-name="global"></sub>
    </parent>
  </top>
</div>

---

这不管用

当然不能，这就是隔离作用域的意义所在，因为父指令和子指令都有隔离作用域，这不起作用

当您希望2指令具有父/子关系时，可以使用父指令的控制器API与子指令到父指令进行通信

检查这把小提琴：

angular.module（“app”）指令（“父”，函数（）{
返回{
限制：“E”，
控制器：功能（$scope）{
this.global={name:“父指令”}；
},
链接：功能（范围）{
},
是的，
模板：“”，
作用域：{}
}
});
角度。模块（“app”）。指令（“子”，函数（）{
返回{
限制：“E”，
需要“^parent”，
作用域：{}，
控制器：函数（）{
},
链接：函数（作用域、元素、属性、父控件）{
log（“父项：+parentCtrl”）；
scope.title=parentCtrl.global；
console.log（scope.title.name）；
},
模板：“全局：{{title.name}}”
}
})

当然不能，这就是隔离作用域的要点，因为父指令和子指令都有隔离作用域，这不起作用

当您希望2指令具有父/子关系时，可以使用父指令的控制器API与子指令到父指令进行通信

检查这把小提琴：

angular.module（“app”）指令（“父”，函数（）{
返回{
限制：“E”，
控制器：功能（$scope）{
this.global={name:“父指令”}；
},
链接：功能（范围）{
},
是的，
模板：“”，
作用域：{}
}
});
角度。模块（“app”）。指令（“子”，函数（）{
返回{
限制：“E”，
需要“^parent”，
作用域：{}，
控制器：函数（）{
},
链接：函数（作用域、元素、属性、父控件）{
log（“父项：+parentCtrl”）；
scope.title=parentCtrl.global；
console.log（scope.title.name）；
},
模板：“全局：{{title.name}}”
}
})

这里有一个不同方法的解决方案-

JS

angular.module（“app”，[]）；
角度。模块（“app”）。指令（“顶部”，函数（）{
返回{
限制：“E”，
模板：“”
}
});
角度.module（“app”）.指令（“父”，函数（）{
返回{
限制：“E”，
控制器：功能（$scope）{
$scope.global={
名称：“父指令”
};
},
链接：功能（范围）{
},
模板：“”，
作用域：{}
}
});
角度。模块（“app”）。指令（“子”，函数（）{
返回{
限制：“E”，
范围：{
全球：“=”
},
控制器：函数（）{
},
链接：功能（范围）{
scope.title=scope.global；
console.log（scope.global）；
},
模板：“{global.name}}”
}
});

加价

<div ng-app="app">
  <top>
  </top>
</div>

---

这里有一个不同方法的解决方案-

JS

angular.module（“app”，[]）；
角度。模块（“app”）。指令（“顶部”，函数（）{
返回{
限制：“E”，
模板：“”
}
});
角度.module（“app”）.指令（“父”，函数（）{
返回{
限制：“E”，
控制器：功能（$scope）{
$scope.global={
名称：“父指令”
};
},
链接：功能（范围）{
},
模板：“”，
作用域：{}
}
});
角度。模块（“app”）。指令（“子”，函数（）{
返回{
限制：“E”，
范围：{
全球：“=”
},
控制器：函数（）{
},
链接：功能（范围）{
scope.title=scope.global；
console.log（scope.global）；
},
模板：“{global.name}}”
}
});

加价

<div ng-app="app">
  <top>
  </top>
</div>

如果我将父对象传递给子对象，则有两种方法。我不会设置父对象的隔离范围。或者，若我隔离父控制器的作用域，我应该在子指令中使用require来访问父控制器。这正是我所做的，我访问父控制器而不是作用域，这就是使用ng模型的方式，以及角度消息的工作方式。在指令之间使用作用域在我看来是一个非常糟糕的主意。若我将父对象传递给子对象，我有两种方法。我不会设置父对象的隔离范围。或者，若我隔离父控制器的作用域，我应该在子指令中使用require来访问父控制器。这正是我所做的，我访问父控制器而不是作用域，这就是使用ng模型的方式，以及角度消息的工作方式。在指令之间使用作用域是一个非常糟糕的主意。

angular.module("app").directive("parent", function(){
        return {
            restrict: "E",
        controller: function($scope){
                this.global = {name:"parent directive"};
        },
        link: function(scope){

        },
        transclude: true,
        template: "<div ng-transclude></div>",
        scope: {}
    }
});

angular.module("app").directive("sub", function(){
        return {
            restrict: "E",
        require:"^parent",
        scope:{},
        controller: function(){

        },
        link: function(scope, element, attr, parentCtrl){
            console.log("parent : "+parentCtrl);
                scope.title = parentCtrl.global;
            console.log(scope.title.name);
        },
        template: "Global : {{title.name}}"
    }
})

angular.module("app",[]);

angular.module("app").directive("top",function(){
    return {
        restrict: "E",
        template: "<parent></parent>"
    }
});

angular.module("app").directive("parent", function(){
    return {
        restrict: "E",
        controller: function($scope){
            $scope.global = {
                name: "parent directive"
            };
        },
        link: function(scope){

        },
        template: "<sub global='global'></sub>",
        scope: {}
    }
});

angular.module("app").directive("sub", function(){
    return {
        restrict: "E",
        scope: {
            global: "="
        },
        controller: function(){

        },
        link: function(scope){
            scope.title = scope.global;
            console.log(scope.global);
        },
        template: "{{global.name}}"
    }
});

<div ng-app="app">
  <top>
  </top>
</div>