javascript - 将字符串的一部分绑定(bind)到 Angular 范围变量

标签 javascript angularjs angularjs-scope angularjs-controller

我正在从服务器中提取 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);
  }
});

Working Plunkr

关于javascript - 将字符串的一部分绑定(bind)到 Angular 范围变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31884765/

相关文章:

php - 如何正确使用 AngularJS $http.post 通过 PHP 更新 MySQLi 表?

angularjs - ondrop ondragover - Uncaught ReferenceError : ondrop is not defined - angular - html5 draggable

javascript - 如何避免使用 Ecma 6 编写的新 Angular 组件?

javascript - 减少 switch 语句中的数组 (AngularJS)

javascript - PHP 正则表达式 (*SKIP)(*F) 在 javascript 中相等

javascript - 如何在 EXtJS 中动态更改 css 内容

javascript - 为什么我的指令的链接功能永远不会被调用?

javascript - 指令隔离范围与嵌入的 HTML

javascript - 从尚未注册到 DOM 的 jquery 对象中删除元素

javascript - NoFlo graph.json/graph.fbp 转 JavaScript 文件