如果我写:
<div>Hello {{name}}!</div>
我在控制器.js之类的东西:
$scope.name = 'Bruno';
结果将是“你好布鲁诺!”……这太棒了!现在我编辑了模板:
<div>Hello <span id="name"></span>!</div>
<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}}');
建议随时欢迎!
我将在回答中加上以下警告:如果您正在编写AngularJS应用程序,那么您将需要使用Angular提供的功能(如指令)来执行此类操作,而不是超出Angular应用程序生命周期并编写然而,为了解决问题的学术答案,这里是全球职能等.
概观
您尝试访问的Angluar魔法基于一些设施:
范围(docs)
范围为Angular表达式(您在属性和双重曲线中放置的内容)提供了上下文,并提供了在该上下文中监视这些表达式的评估更改所需的功能.例如,Scope#$watch
允许您注册每当表达式的求值更改时执行的回调.
$interpolate(docs)
Interpolate接受一个字符串,该字符串可以包含双曲面内的表达式,并将其转换为新的字符串,并将表达式结果插入到原始字符串中. (调用$interpolate(str)返回一个函数,当对提供作用域的对象调用该函数时,返回一个字符串.)
把它放在一起
在编写Angular应用程序时,您通常不必担心这些细节 – 控制器会自动通过范围,并且DOM文本会自动插入.由于您试图在Angular应用程序的生命周期之外访问这些内容,因此您必须跳过其中一些以前隐藏的环节.
angular.injector(docs)
当您使用app.controller,app.factory等在模块上注册服务,过滤器,指令等时,您提供的功能将由注入器调用. Angular在Angular应用程序中为您创建一个,但由于我们没有使用它,您需要使用angular.injector自己创建一个.
一旦有了一个注入器,就可以使用injector.invoke(fn)来执行函数fn并注入任何依赖项(比如$interpolate)以便在函数内部使用.
一个简单的例子
这是一个非常基本的例子
>提供输入和变量之间的双向数据绑定
>使用$interpolate将数据绑定到HTML视图中
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/