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?

score 2 · Accepted Answer · edited May 23 '17 at 12:15

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>

Directive - controller data binding in AngularJS

1 Answers1

Check my other answers for description:

Linked