AngularJS中是否可以在经典的javascript函数中使用数据绑定？

<div>Hello {{name}}!</div>

$scope.name = 'Bruno';

<div>Hello <span id="name"></span>!</div>

<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>

<script type="text/javascript">

  function fillName(subject) {
    $("#name").text("Hello " + subject);
  }

  fillName({{name}}); // this throws "SyntaxError: invalid property id"

</script>
</body>

// i changed: fillName({{name}}); with:
fillName('{{name}}');

[更新]嗯,似乎我误解了你的问题,因为你似乎已经解决了你的问题,但也许其他人会根据问题的标题偶然发现这些信息.

我将在回答中加上以下警告：如果您正在编写AngularJS应用程序,那么您将需要使用Angular提供的功能(如指令)来执行此类操作,而不是超出Angular应用程序生命周期并编写然而,为了解决问题的学术答案,这里是全球职能等.

概观

您尝试访问的Angluar魔法基于一些设施：

范围(docs)

范围为Angular表达式(您在属性和双重曲线中放置的内容)提供了上下文,并提供了在该上下文中监视这些表达式的评估更改所需的功能.例如,Scope#$watch允许您注册每当表达式的求值更改时执行的回调.

$interpolate(docs)

Interpolate接受一个字符串,该字符串可以包含双曲面内的表达式,并将其转换为新的字符串,并将表达式结果插入到原始字符串中. (调用$interpolate(str)返回一个函数,当对提供作用域的对象调用该函数时,返回一个字符串.)

把它放在一起

在编写Angular应用程序时,您通常不必担心这些细节 – 控制器会自动通过范围,并且DOM文本会自动插入.由于您试图在Angular应用程序的生命周期之外访问这些内容,因此您必须跳过其中一些以前隐藏的环节.

angular.injector(docs)

当您使用app.controller,app.factory等在模块上注册服务,过滤器,指令等时,您提供的功能将由注入器调用. Angular在Angular应用程序中为您创建一个,但由于我们没有使用它,您需要使用angular.injector自己创建一个.

一旦有了一个注入器,就可以使用injector.invoke(fn)来执行函数fn并注入任何依赖项(比如$interpolate)以便在函数内部使用.

一个简单的例子

这是一个非常基本的例子

>提供输入和变量之间的双向数据绑定
>使用$interpolate将数据绑定到HTML视图中

Name: <input id="name" type="text" autocomplete="off">
<button id="setname">Set name to Bob</button>
<div id="greeting"></div>

var injector = angular.injector(['ng']);

injector.invoke(function($rootScope,$interpolate) {
  var scope = $rootScope.$new();
  var makeGreeting = $interpolate("Hello {{name}}!");

  scope.$watch('name',function() {
    var str = makeGreeting(scope);
    $("#greeting").text(str);
    $("#name").val(scope.name);
  });

  var handleInputChange = function() {
    scope.$apply(function() {
      scope.name = $('#name').val();
    });
  };

  var setNameToBob = function() {
    scope.$apply(function() {
      scope.name = "Bob";
    });
  };

  $("#name").on('keyup',handleInputChange);
  $("#setname").on('click',setNameToBob);
  handleInputChange();
});

这是一个演示技术的jsFiddle：http://jsfiddle.net/BinaryMuse/fTZu6/