Passing a variable to directive from controller on Button click

Question

TLDR; I don't want to databind two input boxes, but rather pass the variable from the controller to the directive (which has a controller inside).

Currently I have the following

HTML page
HTML template
Javascript page (controller/directive)

I inject the template into the HTML page using a directive in the JS page.

Here in the HTML page I have a button next to an input box

INITIAL AMOUNT : <input type="text" class="text-right" ng-model="initialAmount">
<button ng-click="clicked()" class="btn btn-success btn-lg" style="margin: 5px;">Add Amount</button>

When I click the button I want the text in the input box (initialAmount) to be transferred to another input box I create in the directive (from the template).

I have tried using $scope.displayArea = $scope.$parent.initialAmount; in the directive although the problem is that this is set when the page loads not when the button is clicked.

I have also tried using the scope in the directive but that hasn't worked.

Inside of my directive is a controller that holds all the functions that it carries out.

Thanks heaps!

What you're trying to do is perfectly possible, can you just give us a bit more of your code? — remborg
– remborg, Commented Mar 9, 2017 at 8:16
We'll need code snippet of how you are trying. Anyways, one thing that comes to my mind for this kind of scenario is to use $watch(Angular 1). — Gaurav
– Gaurav, Commented Mar 9, 2017 at 8:22

Mamun · Accepted Answer · 2017-03-09 09:37:34Z

1

Try the following code:

var myApp = angular.module('myApp', []);
myApp.controller('myController',['$scope', function($scope){
  
}]);

myApp.directive('testDirective', [function () {
    return {
        restrict: 'A',
        template: `In Directive:<br/>
                  <input type="text" ng-model="amount"/>`,
        controller: function($scope){
          $scope.clicked = function(){
            $scope.amount = $scope.initialAmount;
          }
        }
    };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  In Controller:<br/>
  <input type="text" class="text-right" ng-model="initialAmount"/>
  <button ng-click="clicked()" class="btn btn-success btn-lg" style="margin: 5px;">Add Amount</button>

  <div test-directive></div>
</div>

edited Mar 9, 2017 at 9:37

answered Mar 9, 2017 at 8:25

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

1 Comment

Ch4osCosmo Over a year ago

Perfect! Thanks heaps. I think the problem was I was trying to split things up between the parent controller and the directive, it was just getting messy...

Amal · Accepted Answer · 2017-03-09 09:01:34Z

0

Try this code:

var demo = angular.module('demo', []);
demo.directive('secondBox', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: false,
        template: '<input type="text" ng-model="secondTextBox"/>',
        controller:["$scope",function($scope){
            $scope.add=function(){
              $scope.secondTextBox=$scope.firstTextBox;
            }  
        }]
    }});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app='demo'>
    <div>
      <input type="text" ng-model="firstTextBox"/>
      <button ng-click="add($event)">Add Amount
      </button>
      <second-box></second-box>
    </div>
</div>

answered Mar 9, 2017 at 9:01

Amal

3,4261 gold badge14 silver badges21 bronze badges

Collectives™ on Stack Overflow

Passing a variable to directive from controller on Button click

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