How To Pass Template-Defined Variable to Angular Controller

Question

This question is a long overdue extension of Angularjs How to pass parameter back to controller from directive with ng-click in which strings are able to be passed to an Angular controller, but variables defined in the template are not.

In this JSFiddle 'string' is passed through to the controller, and var foo is 'undefined'.

index.html:

<div ng-app>
  <div ng-controller="YourController">
    <button type="button" ng-click="showString(foo)">One</button>
    <button type="button" ng-click="showString('Two')">Two</button>
    <p>Result: {{string}}</p>
  </div>
</div>

<script>
    var foo = "bar";
</script>

main.js:

function YourController($scope) {
    $scope.string='';
  $scope.showString = function (provider) {
    $scope.string= provider;
  }
}

(First Stack Overflow post here.. go easy on me ;))

bharwcb · Accepted Answer · 2017-03-17 00:20:10Z

0

Found a solution, here's the updated JSFiddle.

1) In index.html, I changed

<script>
  var foo = "bar";
</script>

to

<script>
  window.foo = "bar";
</script>

2) In main.js, I added

$scope.foo = window.foo;

Feel free to comment if there are better solutions.

answered Mar 17, 2017 at 0:20

bharwcb

113 bronze badges

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

Collectives™ on Stack Overflow

How To Pass Template-Defined Variable to Angular Controller

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related