AngularJS, migrate from directive to component

Question

I'm trying to add a component instead of a directive but it doesn't work. my directive:

    (function() {
    'use strict'; 
    angular.
        module('eventeditor')
        .directive("displayTab",
            function() {
                return({
                    templateUrl: function(elem, attr){
                        if(attr.tabname === 'details') return "/organizer/fragments/detailsform.html";
                    }
                });
            }
        );
    })();

Component style:

(function() {
'use strict';

angular.
    module('eventeditor')
    .component("displayTab", {
        templateUrl: function($element, $attrs) {
            if ($attrs.tabname === 'details') return "/organizer/fragments/detailsform.html";
        }
    });

})();

What am I doing wrong? I use my template like:

<div ng-switch="nav.getTab()">
    <div ng-switch-when="details" display-tab="" tabname="details">details</div>
</div>

Do you see any error on your browser console? How do you use the directive/component in your template? — Shuhei Kagawa
– Shuhei Kagawa, Commented Feb 15, 2016 at 10:05
@ShuheiKagawa no any errors. Now I add how I use my template — Kadzhaev Marat
– Kadzhaev Marat, Commented Feb 15, 2016 at 10:30

Shuhei Kagawa · Accepted Answer · 2016-02-15 10:48:20Z

1

Components work only on element names while directives default to element names and attribute names.

<div ng-switch="nav.getTab()">
    <display-tab ng-switch-when="details" tabname="details">details</display-tab>
</div>

answered Feb 15, 2016 at 10:48

Shuhei Kagawa

4,7771 gold badge35 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kadzhaev Marat Over a year ago

Yes, it works! But now there is another problem. <display-tab type="simple-input" name="name" label="Event Name" model="model.details.name" error="model.errors.details.name"></display-tab>. I want get data from model, but I get empty input value, why? In component I add bindings

Shuhei Kagawa Over a year ago

What does your bindings look like? Also, how do you show the data in the component's template?

Kadzhaev Marat Over a year ago

bindings look like: bindings: { type: '@', name: '@', label: '@', model: '=', error: '=', options: '=', changefunction: '=' }, in template I show data like I did it when use directive: <display-tab type="simple-input" name="name" label="Event Name" model="model.details.name" error="model.errors.details.name"></display-tab>

Kadzhaev Marat Over a year ago

It my template input <div> <div> <label class="form-name" for="{{name}}" >{{label}}</label> </div> <div> <div > <input type="text" ng-model="model" ng-class="{'fieldError' : error != null}" id="{{name}}" name="{{name}}" /> <span ng-show="error" >{{error}}</span> </div> </div> </div>

Shuhei Kagawa Over a year ago

Got it. With components, controllerAs: '$ctrl' is set by default. You'll need to do like name="{{$ctrl.name}}" in your component template.

|

Collectives™ on Stack Overflow

AngularJS, migrate from directive to component

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related