2017-02-17 2 views
0

Вот мой очень простой код:компоненты в угловых 1.5.8 и 1.6.1

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

Я получаю Hello John только при использовании Угловое 1.5.8. Что я должен сделать, чтобы заставить выше работать с Angular 1.6.1? Что мне не хватает?

ответ

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> 

0
<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'; 
    } 
Смежные вопросы