Angular 没有模板的组件表达式绑定

Question

我正在尝试从我的组件输出我的范围数据，但很难弄清楚在没有本地模板的情况下如何做。

出于不同的原因，我需要在 HTML 文件中添加标记，而不是在加载 js 时进行解析

这是目前为止的虚拟代码：(codepen: http://codepen.io/anon/pen/qNBBRN)

HTML:

<comp>
  {{ $ctrl.testing }}
</comp>

非工作 JS 代码：

angular
      .module('Test', [])
      .component('comp', {
        controller: myCtrl,
      });

function myCtrl() {
  var model = this;
  model.testing = '123';
}

document.addEventListener('DOMContentLoaded', function() {
  angular.bootstrap(document, ['Test']);
});

这是我想避免的，即使它有效：

angular
  .module('Test', [])
  .component('comp', {
    controller: myCtrl,
    template: '{{ $ctrl.testing }}',
  });

function myCtrl() {
  var model = this;
  model.testing = '123';
}

document.addEventListener('DOMContentLoaded', function() {
  angular.bootstrap(document, ['Test']);
});

Answer 1

您需要的解决方案是使用绑定将组件的内部私有范围与父范围相关联。

JS

angular
  .module('Test', [])
  .component('comp', {
    controller: myCtrl,
    bindings: {
      testing: '='
    }
  });

function myCtrl() {
   var model = this;
   model.testing = '123';
}

HTML

<comp testing="$ctrl.testing">
  {{ $ctrl.testing }}
</comp>

Plunkr 示例：http://plnkr.co/edit/jLeDyBTFA9OU7oqK5HSI?p=preview

Angular 没有模板的组件表达式绑定

Angular component expression binding without template

angularjs

angularjs-scope

angularjs-components