Question

我是Angular.js的新手，这就是为什么这个问题可能是一个非常基本的问题，但我想知道如何通过$scope显示元素。很简单：

<div id="view" ng-controller="images">{{ image }}</div>

和

function images($scope) {
  $scope.image = '<img src="img/file.png">';
}

在此示例中，它仅将图像标记显示为字符串。显然，人们可以

<div id="view" ng-controller="images"><img src="{{ image }}"></div>

并将源用作变量

$scope.image = 'img/file.png';

但那不是我要搜索的内容。是否可以将元素显示为DOM元素，而不是字符串。

Answer 1

根据文档https://docs.angularjs.org/api/ng/directive/ngBindHtml

你必须把它绑定为html

 <div ng-bind-html="imagesafe"></div>

在控制器中，你必须清理变量

App.controller('Ctrl', ['$scope', '$sce', function($scope, $sce) {
    $scope.image = '<img src="img/file.png">';
    $scope.imagesafe =  $sce.trustAsHtml($scope.image);
}

Answer 2

您可以使用指令（基本上是各种模板）来做您想做的事。

所以你的应用程序包含你的控制器和你的指令：

angular.module('myApp', [])
    .controller('ImagesController', function($scope) {
        $scope.image = '/url/to/my/img.png';
    })
    .directive('showImage', function() {
        return {
            restrict: 'AE',
            replace: 'true',
            templates: '<img ng-src="{{ image }}">'
        };
    })

然后在你的HTML中你会有这样的东西：

<html ng-app="myApp">
    <body>
        <div id="view" ng-controller="ImagesController">
            <show-image></show-image>
        </div>
    </body>
</html>

<show-image将替换为指令<img ng-src="{{ image }}">

中的模板

通过angular.js中的范围变量显示或追加元素

2 个答案: