Two way binding in custom directive in AngularJS

Question

I'm trying to implement two way binding for custom directive in angularJs. Somehow its not working.

html file

<div ng-app='myApp'>Outside directive
  <input type='text' ng-model='outAttr'>{{outAttr}}</br>
  <div my-directive some-attr='outAttr'></div>
</div>

js file

var myApp = angular.module('myApp', []);

myApp.directive('myDirective', function () {
  return {
      restrict: 'A,
      replace: true,
      scope: {
        inAttr: '=someAttr';
      },
      template: "<div><input type='text' ng-model='inAttr'>\
                {{inAttr}}</div>"
     }
})

Somehow its not working. here is JSFiddle link. Can someone help me pointing out my mistake. Thanks.

przno · Accepted Answer · 2014-08-28 18:34:26Z

1

Few syntax errors. The logic of your code is OK - jsFiddle

var myApp = angular.module('myApp', []);

myApp.directive('myDirective', function() {
    return {
        restrict: 'A', // missing '
        replace: true,
        scope: {
            inAttr: '=someAttr' // no ;
        },
        template: '<div><input type="text" ng-model="inAttr">{{inAttr}}</div>' // no break
    };
});

answered Aug 28, 2014 at 18:34

przno

3,5145 gold badges33 silver badges46 bronze badges

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

1 Comment

Indyarocks Over a year ago

Thanks a lot. I think the ';' was the main issue there. While adding deleting I inadvertantly removed " ' " from restrict. My bad! Just now I got it working on fiddle

Collectives™ on Stack Overflow

Two way binding in custom directive in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related