Как установить область действия для компонента AngularJS

Предположим, я создаю компонент 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, поэтому я не могу этого сделать.

Почему Angular (1.5) компоненты всегда имеют изолированную область действия? предполагает, что это совершенно невозможно, и ответ заключается в том, чтобы вместо этого использовать директиву. Если это так, то я не уверен, в чем смысл компонентов.


angularjs-scope angularjs-components
person Peter Wone    schedule 15.05.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы просто не можете сделать это для компонента. Преобразуйте его как директиву и предоставьте функцию ссылки, которая предоставляет область действия директивы для функции 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());
            });
        },
person Peter Wone    schedule 18.05.2020