从控制器获取数据到组件 AngularJs答案

【问题标题】：Get data from controller to Component AngularJs从控制器获取数据到组件 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

<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

有什么想法吗？谢谢！

【问题讨论】：

标签： javascript angularjs components angularjs-components

【解决方案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

【讨论】：

感谢您的解释！问候