Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I have a template that I'm trying to inject into my page

<div ng-repeat="week in weeks" class="main_container">
    <div id="week{{week.weekNumber}}" style="height: 100%">
    ...
    </div>
</div>

The template is correctly added to my main html page however when I use $scope.$apply() to reparse my html it change anything.

I have checked with break points and the scope contains the $scope.weeks array that it needs.

Here's my controller

var PlanningController = function ($scope, $window, $routeParams, $compile) {

var that = this;

this.currentIndex = 1;
this.pageIndex = '0';
this.disallowRightScroll = false;
var carousel;


app.databaseManager.getUserDAO().getUser(
    function (user) {


        if (user) {
            $scope.user = user;
            $scope.weeks = [];
            if ($routeParams.weekIndex) {
                $scope.weekIndex = $routeParams.weekIndex;
            }
            else {
                $scope.weekIndex = PlanningManager.getWeekIndexFromTimeStamp($scope.user.date_start_planning);
            }
            var dayIndex = PlanningManager.getDayIndexFromDate(new Date());


            app.planningManager.getWeeksJson($scope.user, [$scope.weekIndex, $scope.weekIndex + 1, $scope.weekIndex + 2], function (jsonWeeks) {

                $scope.weeks = jsonWeeks;
                var htmlWeekTemplate;
                $.get("modules/planning/partials/weekTemplate.html", function (data) {
                    htmlWeekTemplate = data;
                    htmlWeekTemplate = $compile(htmlWeekTemplate)($scope);
                    var slides = [
                        htmlWeekTemplate
                    ];


                    carousel = new SwipeView('#week-slider', {
                        numberOfPages: slides.length,
                        hastyPageFlip: true
                    });


                    /**
                     * LOAD ALL CHILDREN INTO CAROUSEL
                     */

                    // Load initial data
                    for (var i = 0; i < 3; i++) {
                        var el = document.createElement('div');
                        el.innerHTML = slides[i];
                        carousel.masterPages[i].appendChild(el)
                    }


                    $scope.$apply();
                });

            });
        } else {
            $scope.user = new User();
        }

    }
);


/*    $('.main_container').find('div').each(function(){
 //var innerDivId = $(this).attr('id');
 carousel.masterPages[i].appendChild($(this));
 });*/

};

Any ideas as to what I'm doing wrong?

UPDATE

this is what I get if I try $compile(htmlWeekTemplate)($scope);

[comment, jquery: "2.0.3", constructor: function, init: function, selector: "", toArray: function…]
0: comment
baseURI: null
childNodes: NodeList[0]
data: " ngRepeat: week in weeks "
firstChild: null
jQuery203016117800935171545: undefined
lastChild: null
length: 25
localName: null
namespaceURI: null
nextElementSibling: div.main_container.ng-scope
nextSibling: div.main_container.ng-scope
nodeName: "#comment"
nodeType: 8
nodeValue: " ngRepeat: week in weeks "
ownerDocument: document
parentElement: null
parentNode: document-fragment
prefix: null
previousElementSibling: null
previousSibling: null
textContent: " ngRepeat: week in weeks "
__proto__: Comment
length: 1
__proto__: Object[0]
share|improve this question
    
do jsfiddle or plunkr please –  Eugene P. Mar 19 '14 at 10:04

1 Answer 1

up vote 3 down vote accepted

You need to compile the HTML inserted,

use $compile(newHtmlInserted)($scope);

share|improve this answer
    
Had no issue with this but was wondering, along the way, if that would be possible. Thanks :) –  Jovan Perovic Mar 19 '14 at 10:10
    
...and just to elaborate a little on $apply(): use it to ensure your scope is up-to-date with any data bound to it (ie. it runs the internal digest/dirty-checking). For example, you'd need to call $scope.$apply() after updating a scope variable within a non-angular callback. –  Philip Bulley Mar 19 '14 at 10:12
    
I've updated my code, but I'm getting an error "scope is not defined" –  Mike Bryant Mar 19 '14 at 10:17
    
ah you have $scope I guess, here I meant scope as the $scope –  Jayantha Lal Sirisena Mar 19 '14 at 10:23
    
That's what I thought but when I use $scope I get an object in return (I added it to my post) –  Mike Bryant Mar 19 '14 at 10:34

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.