从控制器获取数据到组件 AngularJs
Posted
技术标签:
【中文标题】从控制器获取数据到组件 AngularJs【英文标题】：Get data from controller to Component AngularJs 【发布时间】：2017-12-30 07:28:02 【问题描述】：我有问题。我在 AngularJs 中创建了一个组件，我想将数据从控制器传递到组件。
数据来到模板组件，但在组件上的控制器中是未定义的！
这是我的代码。
控制器
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 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
有什么想法吗？谢谢！
【问题讨论】：
【参考方案1】：你应该连接$onInit 方法来查看bindings 有什么组件。
vm.$onInit = function()
console.log(vm.name);
在 Angular 1.5.X 之前，您尝试做的事情是完全可行的，但是由于 AngularJS 1.6+ 版本，他们通过在 $compileProvider 上引入 preAssignBindingsEnabled 禁用了控制器的预填充上下文。默认情况下，它设置为 false。如果你真的想看到这个工作，你可以尝试通过下面的代码设置标志（但我不建议使用这个）。引入这一变化的主要原因是为了让 Angular 和 AngularJS API 在设计和架构上看起来相似，最终它将更接近于向 Angular 迁移。
.config(function($compileProvider)
$compileProvider.preAssignBindingsEnabled(true);
)
Plunker
【讨论】：
感谢您的解释！问候以上是关于从控制器获取数据到组件 AngularJs的主要内容，如果未能解决你的问题，请参考以下文章
如何使用AngularJs获取时间，然后将其绑定到从视图到控制器的输入时间
如何使用 REST 将数据从 AngularJS 发布到 Struts 2