Как мы можем использовать переменные области видимости angularjs в html, которые мы добавляем на страницу html через контроллер? - PullRequest
Новая
       0

Как мы можем использовать переменные области видимости angularjs в html, которые мы добавляем на страницу html через контроллер?

0 голосов
/ 26 февраля 2020

У меня есть следующий код 

var input = '<div class="form-group">{{variable}}</div>'

У меня есть вышеуказанный код, который написан внутри контроллера. Я хочу поместить sh этот элемент в представление, и я хочу, чтобы значение этой переменной связывалось с контроллера, но оно просто печатает то же самое, что и {{variable}}. Может кто-нибудь сказать мне, как это сделать ??

Ответы [ 2 ]

3 голосов
/ 26 февраля 2020

Директива ng-bind- html свяжет html, и переменная области будет назначена самому контроллеру 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $sce) {
    $scope.variable = 'test'
    $scope.firstName = $sce.trustAsHtml("<h1>"+$scope.variable+"</h1>");
    
});
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

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

</body>
1 голос
/ 27 февраля 2020

Я согласен с @ sourav-satyam , что если единственное, что контроллер добавляет в HTML, это переменные области видимости, то лучше всего это сделать с помощью директивы ng-bind-html , Команда AngularJS приняла намеренное решение не компилировать директивы AngularJS в контроллере, а также с помощью HTML из директивы ng-bind-html. Он вводит риски безопасности, которых лучше избегать.

Единственное, что я бы сделал по-другому, - это использование литерала шаблона : 

$scope.firstName = $sce.trustAsHtml(`<h1>${$scope.variable}</h1>`);

DEMO 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $sce) {
    $scope.variable = 'test'
    $scope.firstName = $sce.trustAsHtml(`<h1>${$scope.variable}</h1>`);        
});
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

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

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...