我们如何在通过控制器添加到html页面中的html中使用angularjs作用域变量？

16 浏览
0 Comments

我们如何在通过控制器添加到html页面中的html中使用angularjs作用域变量？

我有以下代码:

var input = '{{variable}}'

这段代码是写在控制器里的。我想将这个元素推送到视图中，并且希望这个变量的值从控制器中绑定，但是它只是简单地打印出{{variable}}。有人可以告诉我怎么做吗？

0

2 答案

0 Comments

在AngularJS中，在控制器中通过$scope定义的变量，我们可以通过ng-bind-html指令将其插入到HTML页面中。然而，AngularJS团队故意决定不在控制器中编译AngularJS指令，也不在ng-bind-html指令中编译HTML。这样做是为了避免引入潜在的安全风险。

解决这个问题的方法是使用ng-bind-html指令。通过将变量赋值给$scope.firstName，并使用$sce.trustAsHtml()方法将其转换为可信任的HTML字符串。可以使用ES6的模板字面量来简化代码。

下面是一个示例代码的演示：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $sce) {
    $scope.variable = 'test'
    $scope.firstName = $sce.trustAsHtml(`
${$scope.variable}
`);        
});

在上述代码中，控制器中定义了一个变量$scope.variable，并使用$sce.trustAsHtml()方法将其转换为可信任的HTML字符串。然后，通过ng-bind-html指令将$scope.firstName插入到HTML页面中。通过这种方式，我们可以在HTML中使用控制器中的作用域变量。

0
0 Comments

在AngularJS中，我们可以使用ng-bind-html指令将HTML和作用域变量绑定到控制器本身。但是，这种方法并不是推荐的做法，因为如果将指令绑定到h1元素等元素上，则无法正常工作。在这种情况下，最好使用$compile服务。

为什么在控制器中绑定指令，而不是在初始化作用域数据的地方进行绑定呢？尽管在控制器中使用for循环可以简单地实现ng-repeat指令，但是通过使用$compile服务，可以更好地管理和控制指令的绑定。

虽然我没有一个具体的例子来说明这一点，但我同意你的观点。只是AngularJS专门为此提供了一个服务，这就是我发表评论的原因。当然，你的答案也没有错。

我同意-satyam的观点：如果代码在HTML中只是添加作用域变量，最好使用ng-bind-html指令。AngularJS团队有意决定不在控制器中编译AngularJS指令，同样也不会在ng-bind-html指令中编译HTML。这样做会引入安全风险，最好避免。

0