CODEWITHSUNDEEP
angularjscomponents
Unknown developer
Unknown developer

Reputation: 5920

Components in Angular 1.5.8 and 1.6.1

Here is my very simple code:

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

I am getting Hello John only when using Angular 1.5.8. What do I have to do as to make the above to work with Angular 1.6.1? What am I missing?

Upvotes: 0

Views: 505

Answers (2)

Vlada
Vlada

Reputation: 258

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

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

Then in controller you can change value of binding.

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

Upvotes: 0

Dominik Ruczyński
Dominik Ruczyński

Reputation: 81

I have this code working like that:

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

Upvotes: 1

Related Questions