Angularjs Custom directive using directive controller variable

Question

I created a custom directive in which I have an array that I need to use in other views. for example, say I have an input box in my directive content that I have to use it's value in another controller, how can I achieve that? I tried to use ng-model but I was not successful.

here is my controllers:

angular.module("demo", []);

angular.module("demo").controller("demoController", function ($scope) {
    $scope.name = "John";
});

angular.module("demo").controller("directiveController", function ($scope) {

    $scope.name = "John Doe";

});


angular.module("demo").directive("passVariable", function () {
    return {
        restrict: 'AEC',
        require: "ngModel",
        templateUrl: "content.html",
        link: function (scope, element, attr, ngModel) {
            scope.$watch(function () {
                return ngModel.$modelValue;
            },
            function (modelValue) {
                console.log(modelValue);       
            });

        }
    }
});

and the HTML file:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  </head>

  <body ng-app="demo" ng-controller="demoController">
    <div>
      <pass-variable ng-model="name"></pass-variable>
    </div>
    <br />
    <div>
        Second directive textbox:       <input type="text" ng-model="name" pass-variable="" />
    </div>
    <br />
    <div>
        Main textbox:       <input type="text" ng-model="name" />
    </div>
  </body>

</html>

and content.html

<div ng-controller="directiveController">
    Content Textbox: <input type="text" ng-model="name"/>
</div>

and here is my plunker: http://embed.plnkr.co/rzlUQM6FBI3Sll4F8WaG/preview

BTW, I don't know why plunker does not load content.html

UPDATE I've figured out I should add the controller in directive controller: directiveController and remove the ng-controller='directiveController' in content.html

Nitsan Baleli · Accepted Answer · 2015-03-04 11:09:41Z

1

If I understood correctly, your problem is with the ng-controller in content.html.

<div ng-controller="directiveController">
  Content Textbox: <input type="text" ng-model="name"/>
</div>

once you remove the ng-controller, all three input fields will be synced.

the reason it didn't work is that you defined a new controller in the directive template, which had a $scope.name property that shadowed the original controller's property.

here's a plnkr

answered Mar 4, 2015 at 11:09

Nitsan Baleli

5,4683 gold badges35 silver badges54 bronze badges

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

1 Comment

parand87 Over a year ago

thanks for your answer. I've tested the way you suggested, in this way it does not use the directiveController which actually is the directive's controller, the reason I did this was I have a directive with multiple tasks and a controller and it returns an array to another controller which uses the array, say name array in directiveController should be passed to name array in demoController.

Robert · Accepted Answer · 2015-08-12 15:26:49Z

0

Please try $parent.name as below

<div ng-controller="directiveController">
    Content Textbox: <input type="text" ng-model="$parent.name"/>
</div>

edited Aug 12, 2015 at 15:26

Robert

5,31843 gold badges70 silver badges115 bronze badges

answered Aug 12, 2015 at 15:10

Vijay Anand

1

Collectives™ on Stack Overflow

Angularjs Custom directive using directive controller variable

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related