Apply <strong> tags to a string in my js.coffee file

All we need is an easy explanation of the problem, so here it is.

I am currently using Angular and Slim in my Ruby On Rails Project. I have an array of questions in my js.coffee that are currently being rendered in my view.

One of the strings in the array has strong tags, but it is not being displayed properly in my html.

Instead of getting Standard, I get this…

On which Playfield is the <strong>Standard</strong> game played ?

I am fairly new to angular, what am I missing?

JAVASCRIPT

game_create_ctrl.js.coffee

angular.module('OombangularApp').controller 'GameCreateCtrl', [
  '$scope', '$sce', '$uibModal', 'Game', 'GameFormat', 'PlayfieldType', 'Persona',
  ($scope, $sce, $uibModal, Game, GameFormat, PlayfieldType, Persona) ->

    $scope.step = 1

    ###This works...when it is not an Array
    $scope.html = "On which Playfield is the " + "<strong>Standard</strong>" + " game played ?"
    $scope.stepQuestion = $sce.trustAsHtml($scope.html)        

    ###How do I show the <strong> tags in my view when its an array?

    $scope.stepQuestions = ['What should this Game be called?', 'What should this Game be called?',
                        'What category does this Game belong to?',
                        'On which Playfield is the <strong>Standard</strong> game played ?',
                        'What is the Player Configuration?', 'How is a <strong>Standard</strong> game won?', 'Which Persona owns this Game?']

]

    $scope.stepQuestions = $scope.stepQuestions.map (item) -> $sce.trustAsHtml(item)

VIEWS

new.html.slim

form[name='gameCreateForm' ng-controller='GameCreateCtrl']

    ###This Works
    .question ng-bind-html="stepQuestion"{{ stepQuestion }}

    ###This doesnt
    .question ng-bind-html="stepQuestions"{{ stepQuestions[step - 1] }}

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Please try:
angularjs to output plain text instead of html (similar issue)
or https://docs.angularjs.org/api/ng/directive/ngBindHtml

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply