0

我有一个关于Angularjs 数据绑定功能的问题。

如果我写：

<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 函数中使用数据绑定？

更新：

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

这解决了错误......但仍然没有出现名称......我仍在努力......

建议总是受欢迎的！

4

2 回答 2

2

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

我将在我的答案前加上以下警告：如果您正在编写 AngularJS 应用程序，您将希望使用 Angular 提供的功能（如指令）来执行此类操作，而不是超出 Angular 应用程序生命周期并编写全局函数等。然而，为了对这个问题的学术答案感兴趣，这里是。

概述

您试图在这里获得的 Angluar 魔法基于一些设施：

范围（文档）

作用域为 Angular 表达式（你放入属性和双花括号的东西）提供了一个上下文，并提供了必要的函数来观察这些表达式在该上下文中的评估变化。例如，Scope#$watch允许您注册一个回调，该回调在表达式的评估发生更改时执行。

$interpolate (文档)

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

把它放在一起

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

angular.injector (文档)

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

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

一个简单的例子

这是一个非常基本的例子

  • 在输入和变量之间提供双向数据绑定
  • 提供数据绑定到 HTML 视图使用$interpolate
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/

于 2013-02-10T09:53:12.817 回答
0

fillName 是全局的，所以在你的控制器中你可以做

$scope.name = 'John';
fillName($scope.name);

但这样做是完全错误的。您正在尝试使用 AngularJS 来解决它创建的问题。

于 2013-02-10T11:01:44.590 回答