我正在尝试从我的组件输出我的范围数据,但很难弄清楚如何在没有本地模板的情况下做到这一点。
由于不同的原因,我需要在 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']);
});
最佳答案
您需要的解决方案是使用绑定(bind)将组件的内部私有(private)范围与父范围相关联。
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
关于angularjs - 没有模板的 Angular 组件表达式绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37483936/