angularjs – 没有模板的角度组件表达式绑定

发布时间：2020-12-17 17:06:56 所属栏目：安全来源：网络整理

导读：我正在尝试从我的组件输出我的范围数据,但很难在没有本地模板的情况下弄清楚如何做到这一点. 出于不同的原因,我需要将标记放在HTML文件中,而不是使用js load进行解析这是到目前为止的虚拟代码：(codepen：http://codepen.io/anon/pen/qNBBRN) HTML： comp {

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

出于不同的原因,我需要将标记放在HTML文件中,而不是使用js load进行解析

这是到目前为止的虚拟代码：(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 }}',['Test']);
});

解决方法

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

angular
  .module('Test',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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!