javascript - AngularJS 是否可以在经典的 JavaScript 函数中使用数据绑定(bind)？

Question

我对 Angularjs 数据绑定(bind)功能有疑问。

如果我写:

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

我在 controller.js 中有类似的内容:

$scope.name = 'Bruno';

结果将是“Hello Bruno!”...这太棒了!现在我编辑了模板:

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

我还在关闭正文之前添加了这个 javascript 函数:

<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>

<小时/>

所以我的问题是:

AngularJS 是否可以在经典 JavaScript 函数中使用数据绑定(bind)？

<小时/>

更新:

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

这解决了错误...但名称仍然没有出现...我仍在研究这个...

欢迎提出建议!

Answer 1

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

<小时/>

我将在我的答案前添加以下警告:如果您正在编写 AngularJS 应用程序，您将需要使用 Angular 提供的功能(例如指令)来执行此类操作，而不是超出 Angular 应用程序之外生命周期和编写全局函数等。不过，为了对这个问题进行学术回答，这里是。

概述

您在这里尝试访问的 Angluar 魔法基于以下一些设施:

范围 ( docs )

范围为 Angular 表达式(您放入属性和双花括号中的内容)提供了上下文，并提供了监视该上下文中这些表达式的计算变化所需的函数。例如，Scope#$watch允许您注册一个回调，每当表达式的计算发生变化时就会执行该回调。

$插值 ( docs )

Interpolate 接受一个可以在双花括号中包含表达式的字符串，并将其转换为一个新字符串，并将表达式结果插值到原始字符串中。 (调用 $interpolate(str) 会返回一个函数，当针对提供作用域的对象调用该函数时，会返回一个字符串。)

放在一起

在编写 Angular 应用程序时，您通常不必担心这些细节——您的 Controller 会自动传递一个范围，并且您的 DOM 文本会自动插入。由于您尝试在 Angular 应用的生命周期之外访问这些内容，因此您必须跳过一些以前隐藏的环节。

Angular.injector ( docs )

当您使用 app.controller、app.factory 等在模块上注册服务、过滤器、指令等时，您提供的函数将被调用通过注入(inject)器。 Angular 会在 Angular 应用中为您创建一个，但由于我们没有使用它，因此您需要使用 angular.injector 自己创建一个。

一旦有了注入(inject)器，您就可以使用 injector.invoke(fn) 来执行函数 fn 并注入(inject)任何依赖项(例如 $interpolate code>) 在函数内部使用。

一个简单的例子

这是一个非常基本的示例

• 提供输入和变量之间的双向数据绑定(bind)
• 使用 $interpolate 将数据绑定(bind)到 HTML View

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/