在组件控制器中访问绑定变量答案

【问题标题】：Accessing bindings variables in component controller在组件控制器中访问绑定变量
【发布时间】：2016-10-26 08:28:48
【问题描述】：

我正在尝试 console.log myobject，但我一直未定义。我尝试使用 $scope.watch 和 $attrs.$observe。有人可以告诉我我做错了什么。

这里是html

<my-component some-data="$ctrl.data"></my-component>

这里是组件和控制器

module.component('myComponent', {
bindings: {
  needThisStuff: '<someData'
},
controller: Ctrl,
templateUrl:
  requirejs.toUrl('path/to/templ.html')
 });

function Ctrl(){
var self = this;
console.log(self.needThisStuff);
}

如何使用 $watch 或 $observe 或其他任何东西访问 needThisStuff，我使用的是 angular 1.5

【问题讨论】：

显示你如何设置$ctrl.data，这可能是问题所在。组件代码正确。
$ctrl.data 是另一个组件控制器中的对象
如果我传递给绑定 data=$ctrl 我可以 console.log(self.data) 并查看整个 $ctrl 对象，但是当我执行 data=$ctrl.data 时，它给出了 undefined。
再来一次：展示你如何设置$ctrl.data。

标签： javascript angularjs binding components

【解决方案1】：

我很确定该对象未定义，因为您的 console.log 在组件加载后立即触发。数据还没有返回，所以还是undefined。

作为一种基本的测试方法，您可以将 console.log 包装在 $timeout 中进行测试。

要解决此问题，使用角度组件生命周期挂钩。将您的 Ctrl 更改为如下所示：

function Ctrl {
    var self = this;
    this.$onChanges = function(changesObj) {
       console.log(changesObj.needThisStuff);
    }
}

每当更新单向绑定时调用$onChanges，在本例中是您的needThisStuff 变量。

【讨论】：