Angular 1.X中的指令默认设置为双向绑定.默认情况下,组件具有隔离范围.我有一个看起来像这样的观点:
<div class="my-view"> {{controllerVariable}} </div>
如果我将上面的设置作为指令,则controllerVariable在以下情况下正确加载:
<div ng-controller="myController"> <my-view></my-view> </div>
但如果我使用以下内容将其设置为组件:
myApp.component('myView',{ templateUrl: '/path/to/view',bindings: '=' });
<div class="my-view"> {{$ctrl.controllerVariable}} </div>
但是这也没有显示出值.
我在这里错过了什么?
解决方法
您需要将指令中的值传递给组件:
<my-view passed-var='ctrl.passedVar'></my-view>
在组件中:
myApp.component('myView',bindings: { passedVar: '=' },controller: function () { var vm = this; console.log(vm.passedVar); } });
然后您将能够像在示例中一样访问组件
还有其他一些方法可以做到这一点,例如使用服务来处理信息或使用require,这将使您的组件可以访问指令的控制器.你可以在这里找到上述方法和其他方法:https://docs.angularjs.org/guide/component.