是否有可能在AngularJS使用经典的javascript函数内部的数据绑定?(Is it pos

2019-07-19 17:06发布

我有一个关于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应用程序,您需要使用角度提供,如指令功能,做这种东西,而不是角应用程序生命周期和写作之外去全局函数等。在学术问题的答案的利益,但是,在这儿呢。

概观

你正在试图获得访问这里的Angluar神奇的是基于一些设施:

范围 ( 文档 )

作用域为角表达式(你把属性的东西和双花括号)上下文并提供必要看对在这种情况下,这些表达式求值变化的功能。 例如, Scope#$watch允许你注册时的表现的评价发生变化时执行的回调。

$插值 ( 文档 )

插值需要一个字符串,包括双花括号内的表达式和把它变成一个新的字符串插入到原始字符串表达式的结果。 (呼叫$interpolate(str)返回一个函数,当对一个对象,它提供范围,称为返回一个字符串。)

把它放在一起

当写一个角度应用程序,你往往不担心这些细节 - 你的控制器自动获得通过的范围,你的DOM文本自动插入。 既然你试图访问一个角度应用程序的生命周期之外的这些事情,你必须通过一些以前被隐藏箍跳。

angular.injector( 文档 )

当你使用一个模块上注册服务,过滤器,指令等app.controllerapp.factory ,等等,你所提供的功能是由喷油器调用。 角为您创建一个在角应用程序,但因为我们没有使用一个,你需要使用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/



Answer 2:

fillName是全球性的所以在你的控制器,你可以做

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

但是这样做是完全错误的。 您正在尝试使用AngularJS的东西,它的成立是为了解决。



文章来源: Is it possible in AngularJS to use data bindings inside a classic javascript function?