Search code examples
javascriptangularjsangularjs-directiveangularjs-scope

Angular directive scope. How to isolate single variable

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

Solution

  • 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