Directive - controller data binding in AngularJS

Question

I'm struggling with this for hours now.

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

testApp.directive('test', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div ng-transclude>Hello World</div>',
        link: function(scope) {

        }
    }
});

testApp.controller('testCtrl', function ($scope) {
    $scope.user = "";
});

Here's JSFiddle: http://jsfiddle.net/2bKPj/

Now, all I need is for an input embedded in directive to be able to reflect user model directly in testCtrl controller. I'm confused on how this beast works since I taught that scopes are shared in this case, no?

Community · Accepted Answer · 2017-05-23 12:15:23Z

2

ngTransclude creates a new child scope which protorypically inherits from it's parent scope.

When you use a primitive on the child scope it shadows the parent scope's variable.

It's been already said thousand times: use the dot notation!

controller:

testApp.controller('testCtrl', function ($scope) {
    $scope.data = { user : "Hello World" };
});

html:

<input type="text" ng-model="data.user"/><br />
Directive model:<span>{{ data.user }}</span>

Check my other answers for description:

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Feb 3, 2014 at 0:44

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

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

Collectives™ on Stack Overflow

Directive - controller data binding in AngularJS

1 Answer 1

Check my other answers for description:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Check my other answers for description:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related