Angular directive scope. How to isolate single variable

Question

I'm trying to make input wrapper with angular directives and it should have different labels. Now I even can't access model outside the input (even with scope: false).

HTML:

<input-block data-label="my label">
    <input class="input-field" type="text" name="test" ng-model="test"/>
</input-block>

Test: {{test}} <!--not working-->

Angular:

profileApp.directive('inputBlock', function() {
    return {
        replace: true,
        restrict: 'E',
        transclude: true,
        template: '' +
        '<div class="input-block">' +
            '<span class="input-text">{{label}}</span>' +
            '<ng-transclude></ng-transclude>' +
        '</div>',
        link: function(scope, element, attrs) {
            scope.label = attrs.label;
        }
    };
});

The only idea for now is to find a way to isolate single variable or something similar

@charlietfl that doesn't sound right. What do you do for <input type="text">? — Phil
– Phil, Commented Oct 16, 2016 at 22:14
@Phil strings are primitives in Javascript, not objects (as they are in many other languages). This can cause some unexpected behavior if one is not aware. — Nate Vaughan
– Nate Vaughan, Commented Oct 17, 2016 at 0:12

Andriy · Accepted Answer · 2016-10-16 23:55:34Z

2

as was already said here, just use object for your ng-model:

<body ng-init="model = {}">
  <input-block data-label="my label2">
    <input class="input-field" type="text" name="test" ng-model="model.test"/>
  </input-block>

  Test: {{model.test}}
</body>

plunker: http://plnkr.co/edit/XxeMlVv6I6qOwjPoCUtQ?p=preview

answered Oct 16, 2016 at 23:55

Andriy

15.6k4 gold badges49 silver badges53 bronze badges

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

2 Comments

Undefitied Over a year ago

Ok. Thanks. And what about label? plnkr.co/edit/ncr6QtZ4Diy2uTHYA7dF?p=preview

Undefitied Over a year ago

Just added scope: true and it works. Thanks for help.

Collectives™ on Stack Overflow

Angular directive scope. How to isolate single variable

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related