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

Question

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

如果我写：

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

而且我在 controller.js中 是这样的：

$scope.name = '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}}');

这样就解决了错误…但是仍然没有出现名称…我仍在努力中…

建议永远欢迎！

Answer 1

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

我将以以下警告为前缀：如果您正在编写AngularJS应用程序，则需要使用Angular提供的功能（如指令）来进行此类操作，而不是超出Angular应用程序生命周期并编写代码全局功能等。但是，为了这个问题的学术答案，这里是。

总览

您尝试在此处使用的Angluar魔术基于以下几种功能：

范围 （docs）

范围为Angular表达式（您放入属性和双重curl的东西）提供了上下文，并提供了在该上下文中监视这些表达式的评估变化所需的功能。例如，Scope#$watch允许您注册一个回调，该回调在表达式的求值发生更改时执行。

$ interpolate （docs）

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

把它放在一起

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

angular.injector （docs）

当您使用，等在模块上注册服务，过滤器，指令等时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/