如何将模板定义的变量传递给 Angular 控制器

Question

这个问题是 Angularjs How to pass parameter back to controller from directive with ng-click 的一个迟来的扩展，其中字符串可以传递给 Angular 控制器，但模板中定义的变量不能。

在这个JSFiddle中'string'被传给了controller，var foo就是'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;
  }
}

（这里是第一个 Stack Overflow post.. 放轻松 ;)）

Answer 1

找到解决方法，这里是updated JSFiddle。

1）在index.html，我改了

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

到

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

2) 在main.js中，我添加了

$scope.foo = window.foo;

如果有更好的解决方案，欢迎评论。

如何将模板定义的变量传递给 Angular 控制器

How To Pass Template-Defined Variable to Angular Controller

angularjs

angularjs-scope

angularjs-ng-click