如果我写：
<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/