我正在从服务器中提取 JSON 数据。在我返回的 JSON 对象中,我有一些字符串,我希望能够使用占位符动态插入用户在 UI 中输入的值。
我的理解是这就是 $compile 的用途,但我似乎无法让它发挥作用。我不确定这是否可行,或者我是否只是以错误的方式接近它。
编辑:不确定我是否解释得很好。更进一步,我更新了 Plunk 和下面的代码
一个简化的例子(view Plunk):
查看:
<body ng-controller="MainCtrl">
<input ng-model="name" type="text" />
<p ng-bind-html="myval">{{myval}}</p>
<p>{{name}}</p>
</body>
Angular 应用:
var app = angular.module('plunker', ['ngSanitize']);
app.controller('MainCtrl', function($scope, $compile, dataSvc) {
init();
function init() {
$scope.data = dataSvc.getData();
$scope.name = '';
}
$scope.$watch('name', function(newVal, oldVal) {
var c = $compile('<span>' + $scope.data.vals[0].text + '</span>')($scope);
console.log(c);
console.log(c[0]);
$scope.myval = c[0];
});
});
app.service('dataSvc', function () {
this.getData = function () {
return {
vals: [
{
text: "Hello {{name}}"
}
]
}
};
});
这几乎可以与 $compile 一起使用,并且控制台会按照我希望的方式记录更改,我只是无法将其输出到显示器上。
最佳答案
我建议您在将变量分配给其他变量时使用 $interpolate
服务,这将负责花括号的计算。
代码
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $interpolate) {
$scope.test = "Hello {{name}}!";
$scope.name = 'World';
init();
function init() {
$scope.concat = $interpolate($scope.test)($scope);
}
});
关于javascript - 将字符串的一部分绑定(bind)到 Angular 范围变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31884765/