将部分字符串绑定到 Angular 范围变量

Question

我正在从服务器中提取 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 一起使用，并且控制台会按照我希望的方式记录更改，我只是无法在显示器上输出它。

Answer 1

除非您使用的是 ECMA6，否则括号 ({{}}) 保留用于在 HTML 中插入字符串，而不是 javascript。

要在 javascript 中实现您想要的，只需将变量添加到字符串中：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.test = "Hello " + $scope.name + "!";

  init();
  function init() {
    $scope.concat = $scope.test;
  }
});

如果您希望 JSON 异步更新名称或在编译后的任何时间更新名称，那么在视图中使用范围变量正是您应该做的：

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
</body>

然后在你的控制器中：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  function updateName(name) { // call this when the data is ready
    $scope.name = name;
  }
});

Answer 2

你为什么不写这样的东西：

$scope.greetingText = "Hello";
$scope.greetingName = "World";

然后是

$scope.completeGreeting = $scope.greetingText + $scope.greetingName + "!";

现在看到这样的东西：

{{greetingText}} {{greetingName}}！

Answer 3

我编辑了你的Plnkr，输入框结合了ngModel。它将输出您在输入模型中输入的任何字符串。据我了解，您想输出用户在 UI 中输入的字符串，因此这可能对您有用。

  <body ng-controller="MainCtrl">
    Name: <input ng-model="userInput" placeholder="Enter your input..."/><br>
    <p>{{userInput || "User input will come here..."}}</p>
  </body>

Plunker

Answer 4

我建议您在将变量分配给其他变量时使用 $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

将部分字符串绑定到 Angular 范围变量

Bind part of string to Angular scope variable

javascript

angularjs

angularjs-scope

angularjs-controller