Angular 通过另一个组件获得新的范围

Posted 2023-02-23

【中文标题】Angular 通过另一个组件获得新的范围

【英文标题】：Angular get new scope through another component

【发布时间】：2017-01-03 06:44:24

【问题描述】：

我正在使用 angular 1.5.5

构建一个 component based app 项目

我正在使用 d3js 创建一些 .floating-node，并为每个创建一个 new $scope 并附加到一个已编译组件中。

这部分代码如下：

    nodeEnter.each(() => 
        let childScope = this.$scope.$new();
        childScope.test = "test";
        let compiled = this.$compile('<mycomponent></mycomponent>')(childScope);
        (this.mainContainer).append(compiled);
    );

这部分代码完美运行。

这是mycomponent

export default class Mycomponent 
    constructor($scope) 
        console.log($scope.test);         // undefined
        console.log($scope.$parent.test); // test
    

Mycomponent.$inject = ["$scope"];

但是当我进入我的mycomponent 组件时。我找不到正确的$scope。

我检查了$id 并了解childScope.$id 在Mycomponent $scope.$id += 1 中

我知道我可以通过 $scope.$parent 解决问题，但我会创建不受欢迎的 $scope，而且它并没有真正被循环使用。

那么我怎样才能得到相同的$scope？

【参考方案1】：

似乎有误会。 .component 将始终创建它自己的、隔离的范围，您根本不要在组件中使用 $scope。如果您认为在您的情况下绝对有必要，请使用.directive。我建议您适当地重新设计您的组件。

【讨论】：

你是对的！所以我没有创建一个新的$scope，而是使用了$compile 创建的那个。但是现在探针不同了，我怎样才能从（第一个）控制器中获取我的新范围？

【参考方案2】：

您不需要在您的情况下使用$scope.$new()，因为$compile 已经在创建一个新的范围实例。

解决您的问题的更简单方法是使用 querySelector，我想执行以下代码应该可以帮助您：

newScope = angular.element(document.querySelector("#myId")).isolateScope();

这样您现在应该可以通过 newScope 传递数据了。