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 App：

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

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

Answer 2

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

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

$user_in = "'28','22'";
$stmt = $this->connection->prepare("SELECT `id` FROM `$this->table_name` WHERE `user_id` IN (?) ");         
            if($stmt){
                $stmt->bind_param('s',$user_in);
                if($stmt->execute()){
                     $result = $stmt->get_result();
                     if($result !== false && $result->num_rows >= 1){
                        $row = $result->fetch_all(MYSQLI_ASSOC);
                        $stmt->close();
                        var_dump($row);
                     }
                }
            }
            echo $this->connection->error;
            return false;

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

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;
  }
});

然后在你的控制器中：

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

Answer 3

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

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

然后

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

现在看来是这样的：

{{greetingText}} {{greetingName}}！

Answer 4

我编辑了你的Plnkr，输入框结合了ngModel。它将输出您在inputmodel中输入的任何字符串。据我所知，您希望输出用户在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

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

4 个答案: