CODEWITHSUNDEEP
angularjs
Ka Tech
Ka Tech

Reputation: 9457

Angular 1.5 - Component() Method

I'm trying to get the component method working which is new for Angular 1.5. So far I acheived the following see my jsFiddle JSFIDDLE. For some reason I can not get the templateUrl working so that I can see the html template with the defined scope. Any help would be great.

JSFIDDLE JS

var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope) {

   $scope.name = "Tony Danza";


});

app.component("myBox",  {
      bindings: {},
      controller: function($element) {
        var myBox = this;
        myBox.game = 'World Of warcraft';
      },
      controllerAs: 'myBox',
      templateUrl: "/template",
      transclude: true
})

HTML

<div ng-app="myApp" ng-controller="mainCtrl">
  <script type="text/ng-template" id="/template">
    <div style='width:40%;border:2px solid black;background-color:yellow'>
      Your Favourite game is: {{myBox.game}}
    </div>
  </script>



  Hi {{name}}
  <div my-box>
  </div my-box>

</div><!--end app-->

Upvotes: 1

Views: 605

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191749

Angular components must be elements. Use <my-box> instead of <div my-box>.

The documentation on Components doesn't make this immediately clear, but it is documented.

when you want a directive that is triggered by an attribute or CSS class, rather than an element

The directive/component comparison table also explains that restrict is unavailable for components and they are always elements.

Upvotes: 6

Related Questions