一尘不染

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

angularjs

我对 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}}');

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

建议永远欢迎!


阅读 139

收藏
2020-07-04

共1个答案

一尘不染

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


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

总览

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

范围docs

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

$ interpolatedocs

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

把它放在一起

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

angular.injectordocs

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

2020-07-04