current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

This is part of my AngularJS application

  .controller('Littlebear',function($scope) {
        $scope.spread='<h1>this is the</h1> Littlebear spread.'+
        '<img ng-src="src/images/retro.png" alt="picture" ng-click="click()">';
    })
   .directive('spread', function($compile) {
     var templateTemp='<p> try again </p>';
      var directive = {};


      directive.compile = function(element, attributes) {

   var linkFunction = function($scope, element, atttributes) {
       // bind element to data in $scope
       templateTemp=$scope.spread;
       return templateTemp;
   };

   return linkFunction;
   };

directive.restrict = 'E'; /* restrict this directive to elements */
directive.template = templateTemp;
return directive;
    })

I would like to set template = $scope.spread inside the directory.

If I console.log the templateTemp inside the linkFunction the value of templateTemp is exacly what I am looking for but ouside of that function is templateTemp='

try again

';

can anyone suggest any solution?

(PS: as you might imagine I am quite new to AngularJS)

Thanks Vincent

share|improve this question
up vote 0 down vote

In link function you can do something as below. In link function, I have compiled the desired html and replaced the directive element with the same.

.controller('Littlebear',function($scope) {
        $scope.spread='<h1>this is the</h1> Littlebear spread.'+
        '<img ng-src="src/images/retro.png" alt="picture" ng-click="click()">';
    })
   .directive('spread', function($compile) {
     var templateTemp='<p> try again </p>';
      var directive = {};


      directive.compile = function(element, attributes) {

   var linkFunction = function($scope, element, atttributes) {

				// you can change and compile the html like this
				//element.replaceWith($compile($scope.spread)); //Please Check this line<-----

//Please try this.
 var html =$scope.spread;
        var e =$compile(html)($scope);
        element.replaceWith(e);
				
   };

   return linkFunction;
   };

directive.restrict = 'E'; /* restrict this directive to elements */
directive.template = templateTemp;
return directive;
    })

share|improve this answer
    
thanks for the reply, I tried but I get this error "Argument 1 of Node.replaceChild is not an object." – v1nc3nz00 Feb 8 at 10:41
    
I have edited the answer. Check the code given below comment "//Please try this." $compile needs scope in second function to execute binding expressions against the given scope like this, $compile(html)($scope) . I think this is the reason for error. – Ganesh Feb 8 at 12:01

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.