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 at 10:04
add comment

1 Answer

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 :) –  jperovic Mar 19 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 at 10:12
    
I've updated my code, but I'm getting an error "scope is not defined" –  Mike Bryant Mar 19 at 10:17
    
ah you have $scope I guess, here I meant scope as the $scope –  Jayantha Mar 19 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 at 10:34
show 1 more comment

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.