Question

我必须做一件奇怪的事情，并且我为此苦苦挣扎了很长时间：如何“冻结”一个包含在特定 child 组件中的已包含表达式，而不是默认的绑定行为到当前控制器？因此，使用这样的代码：

<parent>
    <child>{{childCtrl.childValue}}</child>
</parent>

我想将表达式绑定到 child 组件的控制器以显示其数据。

组件看起来像这样：

.component('parent',{
    template: `<p ng-transclude></p>`,
    transclude: true
})

.component('child',{
    template: `
    <li>expression hard coded: <b>{{childCtrl.childValue}}</b>
    <li>expression value from transclusion: <b><span ng-transclude></span></b>`,

    transclude: true,
    controllerAs: 'childCtrl',
    controller: function() {
        this.childValue = 'working!'
    }
})

注入一些被动HTML没问题，但我确实也需要使用表达式来实现。 Here's the fiddle，我相信有办法。

Answer 1

首先：我不认为ng-transclude是要走的路，因为它可以使用外部控制器作用域来编译要转换的任何内容。

第二：使用Angularjs的思维方式（甚至是组件的思维方式），从组件本身外部访问组件的模型/范围并试图这样做违反了封装原则和单一职责原则，外部组件不应告诉内部组件如何使用其模型。所以我想问，这真的是您需要做的事情吗？这是最好的设计吗？您对此有特定的实际用例吗？

您可以做的是配置要显示的值see this plunker

.component('parent',{
    template: `
    <p ng-transclude></p>`,
    transclude: true
})

.component('child',{
  bindings: {
    displayedAttribute: "@"
  },
    template: `
    <li>expression hard coded: <b>{{childCtrl.childValue}}</b>
    <li>expression with configured value: <b>{{childCtrl[childCtrl.displayedAttribute]}}</b>`,

    transclude: true,
    controllerAs: 'childCtrl',
    controller: function($compile, $scope) {
        this.childValue = 'working!'
        this.anotherChildValue= 'also working!'
    }
})

AngularJS 1.5+将转录的表达式绑定到子组件控制器

1 个答案: