Question

我有问题。我在AngularJs中创建一个组件，我想将数据从控制器传递给Component。

数据来到模板组件，但组件中的控制器未定义！

这是我的代码。

控制器

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);
}

你试图做的事情是完全可行的，直到1.5.X角，但是自AngularJS 1.6+版本以来，他们通过preAssignBindingsEnabled引入$compileProvider来禁用预先填充控制器的上下文。默认情况下，它设置为false。如果你真的想看到这个工作，你可以尝试通过下面的代码设置标志（但我不建议使用它）。引入此更改的主要原因是使Angular和AngularJS API在设计和设计上看起来相似。架构，最终它将向Angular的迁移迈进一步。

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

Plunker

从控制器获取数据到Component AngularJs

1 个答案: