是否有可能在AngularJS使用经典的javascript函数内部的数据绑定？ [英] Is it possible in AngularJS to use data bindings inside a classic javascript function?

问题描述

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

I've a question about Angularjs data binding feature.

如果我写：

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

和我已经在 controller.js 是这样的：

$scope.name = 'Bruno';

其结果将是你好布鲁诺！......这是美好的！现在我编辑的模板：

The result will be "Hello Bruno!"... and this is wonderful! Now i edited the template:

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

我也添加了这个javascript函数之前收身：

and i also added this javascript function just before close the body:

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

---

所以我的问题是：

---

So my question is:

是否有可能在AngularJS使用经典的javascript函数内部的数据绑定？

更新：

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

这解决了这个错误...但仍名字没有出现......我仍然在做这个...

and this solved the error... but still the name doesn't appear... i'm still working on this...

建议，随时欢迎！

推荐答案

[更新]嗯，看来我误解你的问题，你似乎已经解决了您的问题，但也许其他人会绊倒在根据此信息标题中的问题。

[Update] Well, it appears that I misunderstood your question, as you seem to have solved your issue, but perhaps other people will stumble upon this information based on the title of the question.

我将preFIX我的回答与下列警告：如果你正在写一个AngularJS应用程序，您需要使用角度提供，如指令功能，做这种东西，而不是去外面该角应用程序生命周期和写作全局函数等在学术答案的问题兴趣，然而，在这儿呢。

I will prefix my answer with the following caveat: if you're writing an AngularJS application, you'll want to use the features Angular provides, like directives, for doing this kind of stuff, rather than going outside the Angular application lifecycle and writing global functions, etc. In the interest of the academic answer to the question, however, here it is.

这是你要可以访问这里的Angluar神奇的是基于一些设施：

The Angluar magic that you're trying to get access to here is based on a few facilities:

范围（文档）

作用域为角前pressions上下文（你把属性和双花括号中的东西），并提供必要的监视，在这种情况下这些前pressions的评价变化的功能。例如， 范围＃$手表 允许您注册时执行的回调，只要的前pression变化的评估。

Scopes provide a context for Angular expressions (the things you put in attributes and the double curlies) and provide the functions necessary to watch for changes in the evaluation of these expressions in that context. For example, Scope#$watch allows you to register a callback that is executed whenever the evaluation of an expression changes.

$插值（文档）

插值需要一个字符串，包括双花括号内的前pressions，并把它变成一个新的字符串插入到原始字符串的前pression结果。 （呼叫 $插值（STR）返回一个函数，当对一个对象，它提供的范围，称为返回一个字符串。）

Interpolate takes a string that can include expressions inside double curlies and turns it into a new string with the expression results interpolated into the original string. (Calling $interpolate(str) returns a function which, when called against an object that provides scope, returns a string.)

在写一个角度应用程序，你往往不担心这些细节 - 你的控制器将自动获得通过一个范围，你的DOM文本自动插入。既然你试图访问这些东西的之外的一个角应用程序的生命周期中，你必须通过一些previously隐藏箍跳。

When writing an Angular app, you often don't have to worry about these details--your controllers automatically get passed a scope, and your DOM text is automatically interpolated. Since you're trying to access these things outside of the lifecycle of an Angular app, you'll have to jump through some of these previously hidden hoops.

angular.injector （文档）

当你使用一个模块上注册服务，过滤器，指令等 app.controller ， app.factory ，等等时，需要提供的功能是由喷射器调用。角为您创建一个以成角度的应用程序，但因为我们没有用的，你需要使用 angular.injector 来自己创建一个。

When you register services, filters, directives, etc. on a module using app.controller, app.factory, and so forth, the functions you provide are invoked by the injector. Angular creates one for you in an Angular app, but since we're not using one, you'll need to use angular.injector to create one yourself.

一旦你有一个喷油器，你可以使用 injector.invoke（FN）来执行函数 FN 和注入任何依赖关系（如 $插值）的函数中使用。

Once you have an injector, you can use injector.invoke(fn) to execute the function fn and inject any dependencies (like $interpolate) for use inside the function.

一个简单的例子

下面是一个非常基本的例子，

Here's a very basic example that

• 提供双向数据的输入和可变
之间的结合

• 提供数据绑定使用到HTML视图 $插值

• Provides two-way data binding between an input and a variable
• Provides data binding into an HTML view using $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/

Here is a jsFiddle that demonstrates the technique: http://jsfiddle.net/BinaryMuse/fTZu6/

这篇关于是否有可能在AngularJS使用经典的javascript函数内部的数据绑定？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！