首页 文章

从控制器获取数据到Component AngularJs

提问于
浏览 次
1

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

任何的想法？谢谢！

javascript angularjs components angularjs-components

1 回答

  • 0

    您应该通过 $onInit 方法连接以查看 bindings 具有哪个组件 .

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

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

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

    Plunker

    回复于

相关问题