1

I am using ng-bing-html to show content in html. 

<div ng-repeat="object in question">
   <div class="row">
      <div ng-bind-html="showComponent(object)"></div>
   </div>
</div>

In JS part: 

$scope.showComponent = (object) ->

        if typeof object.type == 'undefined'
            width = object.position[1]
            offset = object.position[2]

            content = object[$scope.lang]
            console.log(typeof content)
            return '<div lvldraggable="true"' + '>' + content + '</div>'

In js lvldraggable is an attribute defined in the directive: 

app.directive 'lvldraggable', ['$rootScope','uuid', ($rootScope, uuid)->
    restrict: 'A'
    replace: true
    link: (scope, el, attrs, controller) ->
        id = angular.element(el).attr("id")
        unless id
            id = uuid.new()
            angular.element(el).attr("id", id)

        el.bind "dragstart", (e)->
            e.originalEvent.dataTransfer.setData('text', id)
            $rootScope.$emit("LVL-DRAG-START")

        el.bind "dragend", (e)->
            $rootScope.$emit("LVL-DRAG-END")
]

But in the front end, lvldraggable attribute cannot be detected and translated in html. How should I fix that?

Thanks in advance!

Justin
  • 2,765
  • 6
  • 24
  • 25
  • Yes, this is correct, `ng-bind-html` will **not** recognize directives. It is for static html. If you search SO, there are plenty of questions about this. [Here is one](http://stackoverflow.com/questions/21723305/using-directive-in-ng-bind-html) – Davin Tryon May 04 '14 at 09:43
  • @DavinTryon Hi, thanks, so how should I resolve this problem – Justin May 04 '14 at 09:45
  • This is a good start: http://stackoverflow.com/questions/21723305/using-directive-in-ng-bind-html – Davin Tryon May 04 '14 at 09:46
  • possible duplicate of [angular ng-bind-html-unsafe and directive within it](http://stackoverflow.com/questions/17417607/angular-ng-bind-html-unsafe-and-directive-within-it) – Davin Tryon May 04 '14 at 09:47
  • @DavinTryon thanks, so I should add compile in directive or in the showComponent? – Justin May 04 '14 at 09:49
  • You really should be using `ng-include` instead of what you are doing. `ng-bind-html` is really to be used for pre-rendered static html coming from the server. `ng-include` compiles for you automatically. You can then add optional templates using `ng-switch` or `ng-if`. – Davin Tryon May 04 '14 at 09:51
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/51964/discussion-between-ivy-and-davin-tryon) – Justin May 04 '14 at 10:25
  • Hi @Justin, i am facing the same issue. Do you find any solution? If yes, then please post the same. – Mohit Pandey Aug 07 '15 at 09:05

0 Answers0