3

I need to add in the "nextBtn" the ng-disabled directive because that button need to stay disabled until a condition is true. Is it possible? The same thing is for ng-if or ng-class. I can't use them in the template and i don't know why.. This is my situation:

function elementTourTemplate(content, isEnd){
            return '<div class=\"row custom-color\">' +
                '<div id=\"pop-over-text\" class=\"col-md-12\">' +
                content +
                '</div>' +
                '</div>' +
                '<hr>' +
                + $scope.rFunction() +
                '<div class=\"row\">' +
                '<div class=\"col-md-8 qt-tmpl-footer-modal\">' +
                '<a class=\"skipBtn pull-left qt-margin-min\" type=\"button\">Skip</a>' +
                '<button id=\"prevBtn\" class=\"prevBtn uk-button uk-button-danger qt-margin-min\" type=\"button\">' +
                'Back</button>' +
                '<button ng-disabled=\"$scope.rFunction() == false\" id=\"nextBtn\" class=\"nextBtn uk-button uk-button-success\" type=\"button\">' +
                'Next&nbsp;<i class=\"glyphicon glyphicon-chevron-right\">'+
                '</button>'+
                '</div>' +
                '</div>'
        }

 $scope.config=[
            {  
                type: "element",
                selector: "#left-tree-folders",
                heading: "Test one",
                text: "Click here to go to the next step",
                placement: "right",
                scroll: true,
                elementTemplate: elementTourTemplate

            }, ....

Well, as you can see i've got a custom template in which i can show the value i need: $scope.rFunction()

When i try to stamp this function that returns a boolean value outside any element of the template it's working. But if i try to put it on a directive like ng-disabled or ng-if not. Any idea? Thanks

EDIT: as suggested i tried use the $compile but now i've got this

angular.js:12793 TypeError: scope.$new is not a function
    at compositeLinkFn (http://10.100.0.158:8280/docmenu/vendor/angular-1.5.0-beta.2/angular.js:7836:34)
    at compositeLinkFn (http://10.100.0.158:8280/docmenu/vendor/angular-1.5.0-beta.2/angular.js:7859:13)
    at Object.publicLinkFn [as elementTemplate] (http://10.100.0.158:8280/docmenu/vendor/angular-1.5.0-beta.2/angular.js:7736:30)
    at Object.Element (http://10.100.0.158:8280/docmenu/vendor/ng-joyride/ng-joyride.js:37:47)
    at http://10.100.0.158:8280/docmenu/vendor/ng-joyride/ng-joyride.js:555:40
    at Array.map (native)
    at initializeJoyride (http://10.100.0.158:8280/docmenu/vendor/ng-joyride/ng-joyride.js:545:44)
    at Object.fn (http://10.100.0.158:8280/docmenu/vendor/ng-joyride/ng-joyride.js:498:25)
    at Scope.$digest (http://10.100.0.158:8280/docmenu/vendor/angular-1.5.0-beta.2/angular.js:16165:29)
    at Scope.$apply (http://10.100.0.158:8280/docmenu/vendor/angular-1.5.0-beta.2/angular.js:16429:24)

1 Answers1

0

My guess is that angular hasn't compiled the template, and thus is not keeping track of any changes within the html. This prevents ng-if and ng-disabled to be re-evaluated upon a digest cycle. It might work if you compile the template with angular's $compile service:

elementTemplate: $compile(elementTourTemplate)($scope)
fikkatra
  • 5,605
  • 4
  • 40
  • 66
  • Thanks for answer. I tried but i've got another issue now: scope.$new is not a function, see the edited question to see the whole error. It seems generates the error in this line inside the ng-joyride.js code this.popoverTemplate = config.elementTemplate(this.content, isEnd); – Chris Zamperetti Apr 07 '16 at 13:09
  • Hmm, seems that using $compile outside of a directive requires some additional stuff. See http://stackoverflow.com/questions/22370390/how-can-we-use-compile-outside-a-directive-in-angularjs Edited answer to pass along $scope to $compile – fikkatra Apr 07 '16 at 13:14
  • The page now doesn't load and after some time i get this one Maximum call stack size exceeded.. – Chris Zamperetti Apr 07 '16 at 13:20
  • sorry mate, I'm out of ideas. It seems to be ng-joyride related. But I noticed you opened an issue on their github, that might be your best chance. Good luck, I hope you figure it out! – fikkatra Apr 08 '16 at 07:19