1

我刚开始使用 AngularJS，并试图弄清楚如何从 Angular 控制器外部轻松引用（绑定？）范围变量。

简单代码：

<div ng-controller="Ctrl">
  <label>Name:</label>
  <input type="text" ng-model="yourNameInput" placeholder="Enter a name here">
  <input type="button" onClick="console.log(inputName);">
  <hr>
  <h1 ng-bind-template="Hello, {{yourNameInput}}"></h1>
</div>

我将如何绑定{{yourNameInput}}到inputName对我的应用程序的其余部分可用的 var？我设法做到了一种丑陋的方式：

$scope.change = function() { inputName = $scope.yourNameInput; }

进而：

<... ng-change = "change()">

还有更优雅的吗？

4

2 回答 2

4

您可以将$window注入您的控制器并使其在范围内可用。见例子。

function Ctrl($scope, $window) {
    $scope.window = $window;
}​

...

<input type="text" ng-model="yourNameInput" placeholder="Enter a name here" ng-change="window.yourName = yourNameInput">

为了更广泛的使用，您可以在$rootScope上使用它。看另一个例子。

angular.module('myApp', [])
    .run(function($rootScope, $window){
        $rootScope.window = $window;
    });

您还可以看到Call Angular JS from legacy code。

对于 console.log() 你可以使用

<input type="button" onClick="console.log('{{yourNameInput}}');" value="Log">

见例子。

如果你想调试 AngularJS 应用程序，你可以使用AngularJS Batarang（文本描述和源代码）

于 2012-09-09T04:24:22.760 回答
1

好吧，我猜你不会期望你的外部世界会在你的模型改变时自动更新。相反，您可以拉动您的模型。

我不喜欢将模型数据与全局变量同步的想法。如果我是你，我会这样做

console.log($("[ng-controller=Ctrl]").scope().yourNameInput);

外部世界的每个地方都需要访问模型。

于 2012-09-09T05:21:43.360 回答