如何为 AngularJS 组件设置范围

Question

假设我构建了一个 AngularJS 组件

function FooController($scope, $element, $attrs, $http) {
  var ctrl = this;
  ctrl.bar = "WIBBLE";
}

angular.module("app").component("foo", {
    templateUrl: "/app/components/foo.html",
    controller: FooController,
    transclude: true
}

使用这样的模板，其中包含带有后备内容的嵌入标签

[<ng-transclude>{{$ctrl.bar}}</ng-transclude>]

我在这样的页面中使用它

<foo></foo>

然后回退内容在控制范围内执行，我得到这个

[WIBBLE]

但是如果我通过嵌入提供相同的东西

<foo>{{$ctrl.bar}}</foo>

然后被嵌入的内容有一个新的隔离范围并且 $ctrl.bar 没有解析所以我得到

[]

如何设置合适的范围？

对于指令，我会定义 link 函数并使用 transclude 函数来设置范围，但是 component 不支持 link 函数，所以我不能那样做。

Why do Angular (1.5) components always have an isolated scope? 表明这是完全不可能的，答案是改用指令。如果是这样，我不确定组件的意义是什么。

Answer 1

你不能为一个组件做这件事。将其重构为一个指令并提供一个 link 函数，该函数将指令范围提供给 transclude 函数。

        transclude: true, // support <ng-transclude> in the template
        link: function (scope, element, attrs, controller, transclude) {
            var transclusionElement = element.find("ng-transclude");
            transclude(scope, function (clone, scope) {
                // link element parameter is a jQuery element
                transclusionElement.html(""); // wipe the slate
                transclusionElement.append(clone); // write the content
                // DO NOT TRY TO BE CLEVER LIKE THIS
                // transclusionElement.html(clone.html());
            });
        },

如何为 AngularJS 组件设置范围

How to set scope for AngularJS component

angularjs-scope

angularjs-components

如何设置合适的范围？