javascript - 在组件 Controller 中访问绑定(bind)变量

Question

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

这是html

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

这里是组件和 Controller

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

Answer 1

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

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

要解决此问题，使用 Angular 组件生命周期 Hook 。将您的 Ctrl 更改为如下所示:

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

$onChanges 在单向绑定(bind)更新时被调用，在本例中是您的 needThisStuff 变量。