无法添加 ng-disabled 指令 ngJoyride

Posted 2023-05-09

【中文标题】无法添加 ng-disabled 指令 ngJoyride

【英文标题】：Can't add ng-disabled directive ngJoyride

【发布时间】：2016-07-28 08:08:18

【问题描述】：

我需要在“nextBtn”中添加 ng-disabled 指令，因为该按钮需要保持禁用状态，直到条件为真。可能吗？ ng-if 或 ng-class 也是如此。我不能在模板中使用它们，我不知道为什么..这是我的情况：

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

            , ....

好吧，你可以看到我有一个自定义模板，我可以在其中显示我需要的值：$scope.rFunction()

当我尝试标记这个在模板的任何元素之外返回布尔值的函数时，它正在工作。但是，如果我尝试将它放在像 ng-disabled 或 ng-if not 这样的指令上。任何想法？谢谢

编辑： 正如建议的那样，我尝试使用 $compile 但现在我有了这个

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】：

我的猜测是 angular 没有编译模板，因此没有跟踪 html 中的任何更改。这可以防止在摘要循环中重新评估 ng-if 和 ng-disabled。如果您使用 Angular 的 $compile 服务编译模板，它可能会起作用：

elementTemplate: $compile(elementTourTemplate)($scope)

【讨论】：

感谢您的回答。我试过了，但现在又遇到了另一个问题：scope.$new 不是函数，请查看已编辑的问题以查看整个错误。似乎在 ng-joyride.js 代码 this.popoverTemplate = config.elementTemplate(this.content, isEnd);

嗯，似乎在指令之外使用 $compile 需要一些额外的东西。请参阅***.com/questions/22370390/… 已编辑的答案以将 $scope 传递给 $compile

页面现在无法加载，过了一段时间我得到了这个 超出了最大调用堆栈大小..

对不起，伙计，我没有主意了。它似乎与 ng-joyride 相关。但我注意到你在他们的 github 上打开了一个问题，这可能是你最好的机会。祝你好运，希望你能解决！