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

Question

我有问题。我在 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

有什么想法吗？谢谢！

Answer 1

你应该通过 $onInit 方法连接起来，看看 bindings 有什么组件。

vm.$onInit = function(){
    console.log(vm.name);
}

在 angular 1.5.X 之前，您尝试做的事情是完全可行的，但是由于 AngularJS 1.6+ 版本，他们通过引入 [=禁用了控制器的预填充上下文=14=] 超过 $compileProvider。默认情况下，它设置为 false。如果你真的想看到这个工作，你可以尝试通过下面的代码设置标志（但我不建议使用这个）。引入此更改的主要原因是使 Angular 和 AngularJS API 在设计和体系结构上看起来相似，最终将更接近迁移到 Angular .

.config(function($compileProvider){
  $compileProvider.preAssignBindingsEnabled(true);
})

Plunker

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

Get data from controller to Component AngularJs

javascript

components

angularjs

angularjs-components