我对 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}}');
这样就解决了错误…但是仍然没有出现名称…我仍在努力中…
建议永远欢迎!
[更新]好吧,看来您似乎已经解决了您的问题,我似乎误解了您的问题,但是也许其他人会根据问题的标题偶然发现这些信息。
我将以以下警告为前缀:如果您正在编写AngularJS应用程序,则需要使用Angular提供的功能(如指令)来进行此类操作,而不是超出Angular应用程序生命周期并编写代码全局功能等。但是,为了这个问题的学术答案,这里是。
您尝试在此处使用的Angluar魔术基于以下几种功能:
范围 (docs)
范围为Angular表达式(您放入属性和双重curl的东西)提供了上下文,并提供了在该上下文中监视这些表达式的评估变化所需的功能。例如,Scope#$watch允许您注册一个回调,该回调在表达式的求值发生更改时执行。
Scope#$watch
$ interpolate (docs)
Interpolate接受一个字符串,该字符串可以在双curl中包含表达式,然后将其转换为新字符串,并将表达式结果插值到原始字符串中。(调用$interpolate(str)返回一个函数,当对提供范围的对象进行调用时,该函数返回一个字符串。)
$interpolate(str)
在编写Angular应用程序时,您通常不必担心这些细节- 您的控制器会自动传递一个范围,并且您的DOM文本会自动插值。由于您尝试在Angular应用程序的生命周期 之外 访问这些内容,因此您将不得不跳过一些以前隐藏的篮球。
angular.injector (docs)
当您使用,等在模块上注册服务,过滤器,指令等时app.controller,app.factory注入器将调用您提供的功能。Angular在Angular应用中为您创建了一个,但是由于我们没有使用它,因此您需要使用angular.injector自己创建一个。
app.controller
app.factory
angular.injector
有了注入器后,就可以injector.invoke(fn)用来执行函数fn并注入任何依赖项(例如$interpolate),以在函数内部使用。
injector.invoke(fn)
fn
$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/