How to pass model variables from one directive to other using same controller for both directives?

Question

Lets say i have a controller A:

app.controller('A', function($scope) {
    $scope.commonvalue = "";
})

app.directive('dir1', function() {
    return {
        restrict: 'E',
        templateUrl: 'template1.html',
        controller: 'A'
    };
});

app.directive('dir2', function() {
    return {
        restrict: 'E',
        templateUrl: 'template2.html',
        controller: 'A'
    };
});

DIR1 template1.html:

<label>Enter value: </label>
<input ng-model="commonvalue"> </input>

DIR2 template2.html:

<p> The value of commonvalue variable is {{ commonvalue }} </p>

All i want to do is change the value of commonvalue from dir1 and get its value in dir2. One solution is to make the commonvalue variable in $rootScope. but i do not want to do that. I only want to change it in 'A' Controllers scope.

Aakash · Answer 1 · 2015-09-10T07:21:07.413

You can try something like this.

<div ng-app="myapp" ng-controller="myCtrl">
    <my-changer ng-model="someVal"></my-changer>
    <my-receiver ng-model="someVal"></my-receiver>
</div>

angular.module("myapp", [])
.controller("myCtrl", function($scope){
    $scope.someVal = "Hello";
}).directive("myChanger", function(){
    return {
        restrict: "E",
        scope: {
            txtVal : "=ngModel"
        },
        template: "<input type='text' ng-model='txtVal'/>",
        link: function(scope, elem, attr, ngModelCtrl){
        }
    };
}).directive("myReceiver", function(){
    return {
        restrict: "E",
        scope: {
            txtVal : "=ngModel"
        },
        template: "<input type='text' ng-model='txtVal'/>",
        link: function(scope, elem, attr, ngModelCtrl){
        }
    }
});

JSFiddle

--EDIT---

If you are looking for one way binding then do this.

angular.module("myapp", [])
.controller("myCtrl", function($scope){
    $scope.someVal = "Hello";
}).directive("myChanger", function(){
    return {
        restrict: "E",
        scope: {
            txtVal : "=ngModel"
        },
        template: "<input type='text' ng-model='txtVal'/>",
        link: function(scope, elem, attr, ngModelCtrl){
        }
    };
}).directive("myReceiver", function(){
    return {
        restrict: "E",
        scope: {
            txtVal : "=ngModel"
        },
        template: "<p ng-bind='txtVal'/>",
        link: function(scope, elem, attr, ngModelCtrl){
        }
    }
});

Updated JSFiddle

score 1 · Answer 2 · edited May 23 '17 at 11:44

what you want is actualy normal behavior. when you dont specify a scope for your directive, it will inherit properties from its controller, and when ever a value changes it'll reflect back in the controller..

see this plnkr

app.controller('MainCtrl', function($scope) {
    $scope.obj = {};
    $scope.obj.commonvalue = "initial value";
});


app.directive('dir1', function() {
    return {
        restrict: 'A',
        templateUrl: 'dir1.html'
    }
})

app.directive('dir2', function() {
    return {
        restrict: 'A',
        templateUrl: 'dir2.html'
    }
})

I've updated the answer to use a 'dotted' ng-model, I think that was your issue at first. You can review my answer where it is explained why it's important.

from the answer:

What happens is that the child scope gets its own property that hides/shadows the parent property of the same name

but the change on input field in directive1 is not being reflected in directive 2. check my code again from your point of view it should work but it is not. in directive 2 the value of variable commonvalue is undefined. — user3859323, Sep 10 '15 at 10:00

score 0 · Answer 3 · answered Sep 10 '15 at 07:04

0

You can define scope variable with '=' char in your directives and pass 'commonvalue' to them: https://jsbin.com/fobofepuji/1/edit?html,js,output

answered Sep 10 '15 at 07:04

Alexander Strochkov

417
2
8

How to pass model variables from one directive to other using same controller for both directives?

3 Answers3