模板函数不插入组件绑定

Question

我使用1.5组件,但我认为这并不重要.

我正在尝试=在父控制器和子指令隔离范围之间进行单个绑定.子隔离范围是字面上插入绑定; 而不是vm.data内插到我在控制器中定义的数据,它实际上vm.data是一个字符串.

如果我尝试单向绑定@然后再次,"插值"值将导致{{vm.data}}字面上的结果.

如何将父控制器中定义的字符串放入子组件的模板中？

angular
  .module('app', [])
  .controller('Ctrl', function () {
    this.str = '<0>, blah, <1>';
  })
  .component('appComponent', {
    restrict: 'E',
    controller: 'Ctrl as vm',
    template: '<div><app-str appstr-data="{{vm.str}}"></app-str></div>'
  })
  .component('appStr', {
    bindings: { appstrData: '@' },
    restrict: 'EA',
    template: function($element, $attrs) {
      console.log($attrs.appstrData)
      return '<span>'+$attrs.appstrData+'</span>';
    }
  });

https://plnkr.co/edit/VWVlhDbhP2uDRKtXJZdE?p=preview

Answer 1

如果要获取在父控制器中定义的字符串以在子代中进行渲染，则应{{appStr.appstrData}}仅使用插值在子模板中使用它。

您需要更改的第一件事是，您template从appStr模板返回了不正确的内容。

代替

return '<span>'+$attrs.appstrData+'</span>';

使用

return '<span>{{appStr.appstrData}}</span>';

基本上，您应该使用组件名称来访问组件bindings，就像这里的组件名称一样appStr，这就是为什么可以使用以下方式访问变量绑定的原因{{appStr.appstrData}}

零件

.component('appStr', {
    bindings: { appstrData: '@' },
    restrict: 'EA',
    template: function($element, $attrs) {
      return '<span>{{appStr.appstrData}}</span>'; //<--change here
    }
});

Demo Plunkr

带=绑定的Plunkr

没有绑定（isolate: false）的 Plunkr表示没有孤立的作用域