Question

我有一个像var message = "you are moving to {{output.number}}";

这样的字符串

我希望将它放到div元素中。我尝试使用$("#message").html(message);

但它只是为我打印了整个字符串。我想让output.number打印出它拥有的价值。是否有可能实现我想要的目标？

我正在使用angular.js 1.5。

Answer 1

我希望你正在寻找这样的东西。您可以使用控制器内的范围变量来完成它。

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.bootcss.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="myCtrl">
        <input type="number" ng-model="output.number" />
        <button ng-click="AppendItem()">Append</button>
        <div id="message"></div>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.output = {};
            $scope.AppendItem = function () {
                var string = "Your Number is " + $scope.output.number;
                $("#message").html(string);
            }
        });
    </script>

</body>

</html>

Answer 2

使用$ interpolate服务，如：

var message = $interpolate("you are moving to {{number}}")(output) 
// or
var message = $interpolate("you are moving to {{output.number}}")($scope)

Answer 3

你几乎就在那里尝试：

$scope.output.number = '123';
var message = "you are moving to" + output.number;
$("#message").html(message);

不要把变量放在＆＃34;＆＃34;引号。

Answer 4

当我们要将一个字符串变量附加到另一个字符串变量时，我们需要使用追加运算符ie。，＆＃34; + ＆＃34;。这是一个例子。

var output.number = 10;
var message = "you are moving to " + output.number;
$("#message").html(message);

Answer 5

您可以使用$compile：

执行此操作

$compile(angular.element(document.querySelectorAll('#message')[0]).html("you are moving to {{output.number}}"))($scope);

在控制器中添加$compile作为依赖项。

一切顺利。

Answer 6

你可以试试这个：

<html ng-app="app">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
 </head>
 <body ng-controller="appCtrl">
  <p id="message"></p>
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"> </script>

</body>

JS：

不应该在控制器内编写DOM操作代码，但可以了解如何操作。

var app = angular.module('app', []);
app.controller('appCtrl', function($scope, $interpolate){
  var msg = "you are moving to {{number}}";
  $scope.number = 10;
  $('#message').html($interpolate(msg)($scope));
});

如何将字符串转换为角度绑定？

6 个答案: