Angular 1.5.8 和 1.6.1 中的组件答案

【问题标题】：Components in Angular 1.5.8 and 1.6.1Angular 1.5.8 和 1.6.1 中的组件
【发布时间】：2017-07-06 23:38:30
【问题描述】：

这是我非常简单的代码：

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
</head>

<body> 

    <t-component test="test">
        <div >
             {{test}} John

        </div>
    </t-component>


    <script>
        angular.module('myApp', []).
        component('tComponent', {
            bindings: {
                test: '='
            },

        controller: function() {
            var self = this;
            self.test='Hello';
        }
        });
    </script>
</body>
</html>

只有在使用 Angular 1.5.8 时，我才会收到 Hello John。我需要做什么才能使上述内容与 Angular 1.6.1 一起使用？我错过了什么？

【问题讨论】：

标签： angularjs components

【解决方案1】：

我的代码是这样工作的：

<t-component test="'test'"></t-component> 


<script>
    angular.module('myApp', []).
    component('tComponent', {
      template:'{{vm.test}} John',
        bindings: {
            test: '<'
        },
    controller: function() {
        var self = this;

        self.$onInit = function(){
         // self.test ='hello';  //if you don`t want to use binding
        }

    },
    controllerAs: 'vm'
    });
</script>

【讨论】：

【解决方案2】：

<body> 
<t-component test="'Hello'"></t-component>
<script>
    angular.module('myApp', []).
        component('tComponent', {
            template: `
                {{$ctrl.test}} John
            `,
            bindings: {
                test: '='
            },
           controller: function() {

            }
        });
</script>
</body>

然后在控制器中你可以改变绑定的值。

    self.$onInit = function(){
        self.test ='I am changed'; 
    }

【讨论】：