Angular directive not working with dynamic data come from $http

Question

I have an angular directive to change image source according to screen size.it is working fine with static content but it is not working with dynamic data come from $http request.

My directive

app.directive("changeOnScreenResize", ["$window", function($window) {
  return {
    restrict: 'A',

    link: function(scope, elem, attrs) {

        $window.onresize = function() {
        changeImage();
        scope.$apply();
      }
      changeImage();

      function changeImage() {

           scope.screenWidth = $window.innerWidth;

        if(scope.screenWidth <= 600) {
           elem.attr('src', attrs.small);
            console.log(attrs.small);
        }
        else {
          elem.attr('src', attrs.big);
        }
      }
    }
  };
}]);

Dynamic Data Call from $http

 <div ng-repeat="slideContent in vm.slides track by $index" >
      <div ng-bind-html="vm.getHtml(slideContent)"></div>
    </div>

Static Data which is same as data get from $http request and directive is working fine in this case.

<img  change-on-screen-resize src="abc.jpg" small="xyz.jpg" big="abcd.jpg" >

What does vm.slides look like? Why do you have to get HTML through a function? — Kyle
– Kyle, Commented May 5, 2016 at 17:28
actually each slide image has different html page which we have to get by ajax call and set it in [vm.slides] array and get in view by [ng-repeat] — Satnam Singh
– Satnam Singh, Commented May 5, 2016 at 17:33
we don't have json we get response in html string '<img change-on-screen-resize src="abc.jpg" small="xyz.jpg" big="abcd.jpg" >' — Satnam Singh
– Satnam Singh, Commented May 5, 2016 at 17:37

Kyle · Accepted Answer · 2016-05-05 18:14:35Z

The problem is that you're inserting new HTML to your scope, without re-compiling the app. So angular has no idea what change-on-screen-resize in the child elements mean.

Please see this working demo: http://plnkr.co/edit/NJJjgoMuhnDRjnE2jNYE?p=preview

You'll need to make a new directive to call $compile after successfully loading the DOM with new HTML.

app.directive('bindUnsafeHtml', ['$compile',
  function($compile) {
    return function(scope, element, attrs) {
      scope.$watch(
        function(scope) {
          // watch the 'bindUnsafeHtml' expression for changes
          return scope.$eval(attrs.bindUnsafeHtml);
          //return element.children();
        },
        function(value) {
          // when the 'bindUnsafeHtml' expression changes
          // assign it into the current DOM
          element.html(value);

          // compile the new DOM and link it to the current scope
          // NOTE: we only compile .childNodes so that
          // we don't get into infinite loop compiling ourselves
          $compile(element.contents())(scope);
        }
      );
    };
  }
]);

Collectives™ on Stack Overflow

Angular directive not working with dynamic data come from $http

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related