Question

这是我非常简单的代码：

<!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一起使用？我错过了什么？

Answer 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>

Answer 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'; 
    }

Angular 1.5.8和1.6.1中的组件

2 个答案: