我有一个问题。我在 AngularJs 中创建一个组件，我想将数据从 Controller 传递到组件。
数据到达模板组件，但在组件的 Controller 中未定义!
这是我的代码。
Controller
angular.module('testModule')
.controller('testController', ['$scope',
function($scope){
var vm = this;
vm.name = "John";
}
]);
组件。在 console.log(vm.name) 中，它未定义!这是我的问题。
angular.module('testModule')
.component('testComponent', {
bindings: {
"name": '='
},
controllerAs: 'ctrl',
controller: ['$scope', function ($scope) {
var vm = this;
console.log(vm);
console.log(vm.name);
}],
template: "<h2>Hi {{ctrl.name}}</h2>",
});
HTML
<html ng-app="testModule">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="app.module.js"></script>
<script src="testController.js"></script>
<script src="testComponent.js"></script>
</head>
<body>
<div ng-controller="testController as ctrl">
<test-component name="ctrl.name"></test-component>
</div>
</body>
</html>
这是Plunker
有什么想法吗？谢谢!
最佳答案
您应该通过 $onInit 方法进行连接，以查看 bindings 具有哪些组件。
vm.$onInit = function(){
console.log(vm.name);
}
您尝试做的事情在 Angular 1.5.X 之前是完全可行的，但自 AngularJS 1.6+ 版本开始，他们通过在 $compileProvider 上引入 .默认情况下它设置为 false。如果你真的想看到这个工作，你可以尝试通过下面的代码设置标志(但我不建议使用这个)。引入这一更改的主要原因是为了让 Angular 和 AngularJS API 在设计和架构上看起来相似，最终将向迁移到 Angular 更近一步。preAssignBindingsEnabled 来禁用预填充 Controller 上下文
.config(function($compileProvider){
$compileProvider.preAssignBindingsEnabled(true);
})
关于javascript - 从 Controller 获取数据到 AngularJs 组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45285191/