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}} <可以访问变量绑定的原因/ p>

<强>组件

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

Demo Plunkr

Plunkr with = binding

Plunkr with no bindings（isolate: false）表示没有孤立的范围

模板函数不插入组件绑定

1 个答案: