ReferenceError:函数未在javascript中定义

Question

ReferenceError:函数未在javascript中定义

Jig*_*ana 3 javascript function angularjs

你好我是javascript和angularjs的新手,我已经在我的comtroller中打开了一个网站的功能,我在按钮的"onclick"上调用该功能",我得到了ReferenceError:当我尝试时,openWebsite没有被定义要做到这一点,我的代码如下,请帮我解决这个问题,提前谢谢.

调节器

     app.controller('listingdetailController', function ($http, $scope, $compile, $filter, $sce) {

        var Catid = '1';
        var SearchTxt = 'cay';
        var url = encodeURI("http://www.yahoo.com");


        $http({
            method: 'POST',
            url:  API_HOST+'/webservice/listingdetail',
            headers:
                    {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'caymanauth': caymanauth
                    },
            data: "&Catid=" + Catid + "&SearchTxt=" + SearchTxt,
            contentType: 'application/x-www-form-urlencoded'
        }).success(function (data)
        {

            var i;
            var Content = ' ';
            for (i = 0; i<data['Details'].length; i++)
            {
                if (Content === ' ')
                {
                    Content =

 '<div class="app-page-photo">'+   
      '<div class="app-hero">'+
        '<ul class="image ng-scope" rn-carousel="">'+

          '<li style="display: inline-block; transform: translate3d(0%, 0px, 0px);">'+
             '<div class="bgimage" ng-style="{background-image: url("images/gallery/01.png")}" style="background-image: url("images/gallery/01.png");">'+
             '</div>'+
          '</li>'+
          '<li style="display: inline-block; transform: translate3d(100%, 0px, 0px);">'+
             '<div class="bgimage" ng-style="{background-image: url("images/gallery/02.png")}" style="background-image: url("images/gallery/02.png");">'+
             '</div>'+
          '</li>'+
          '<li style="display: inline-block; transform: translate3d(200%, 0px, 0px);">'+
             '<div class="bgimage" ng-style="{background-image: url("images/gallery/03.png")}" style="background-image: url("images/gallery/03.png");">'+
             '</div>'+
          '</li>'+
        '</ul>'+ 
       ' </div>'+
      '</div>'+


      '<ons-list class="app-photo-buttons list ons-list-inner">'+
         '<ons-list-item class="list__item ons-list-item-inner list__item--action-buttons" modifier="action-buttons">'+
            '<ons-row class="action row ons-row-inner">'+

              '<ons-col class="action-col col ons-col-inner">'+ 
              '<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
              '<div class="action-icon">'+
              '<ons-icon class="ons-icon ons-icon--ion ion-android-call fa-lg" icon="ion-android-call">'+
              '</ons-icon>'+
              '</div>'+
              '<div class="action-label">Phone</div>'+
              '</div>'+
              '</ons-col>'+


             '<ons-col class="action-col col ons-col-inner" onclick="sendEmail(message.Email, message.subject, message.body)";>'+ 
              '<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
              '<div class="action-icon">'+
              '<ons-icon class="ons-icon ons-icon--ion ion-ios-email fa-lg" icon="ion-ios-email">'+
              '</ons-icon>'+
              '</div>'+
              '<div class="action-label">Email</div>'+
              '</div>'+
              '</ons-col>'+



              '<ons-col class="action-col col ons-col-inner">'+ 
              '<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
              '<div class="action-icon">'+
              '<ons-icon class="ons-icon ons-icon--ion ion-earth fa-lg" icon="ion-earth">'+
              '</ons-icon>'+
              '</div>'+
              '<div class="action-label">Website</div>'+
              '</div>'+
              '</ons-col>'+


              '<ons-col class="action-col col ons-col-inner">'+ 
              '<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
              '<div class="action-icon">'+
              '<ons-icon class="ons-icon ons-icon--ion ion-android-share-alt fa-lg" icon="ion-android-share-alt">'+
              '</ons-icon>'+
              '</div>'+
              '<div class="action-label">Share</div>'+
              '</div>'+
              '</ons-col>'+       
            '</ons-row>'+
        '</ons-list-item>'+
      '</ons-list>'+                      

         '<ons-list style="border-top: none;">' +
         '<ons-list-item>' +
         '<ons-row class="detail-row">' +
         '<ons-col style="-webkit-box-flex: 0; flex: 0 0 30px; max-width: 30px ; width=30px">' +
         '<ons-icon icon="fa-map-marker" fixed-width="true">' + '</ons-icon>' +
         '</ons-col>' +
          '<ons-col>' +

          '<div class="desc">'+
          '<ons-icon class="ons-icon fa-map-marker fa fa-lg" fixed-width="true" icon="fa-map-marker">'+
          '</ons-icon>'
          + data['Details'][i]['varCityName']+
          '</div>'+
          '</ons-col>' +
          '</ons-row>' +
          '</ons-list-item>' + '<br>' +


          '<ons-list-item>' +
          '<ons-row class="detail-row">' +
          '<ons-col style="-webkit-box-flex: 0 flex: 0 0 30px max-width: 30px width=30px">' +
          '<ons-icon icon="ion-home" fixed-width="true">'+'</ons-icon>'+
          '</ons-col>' +                          

          '<ons-col>' +
          '<div class="desc">'+
          '<ons-icon class="ons-icon ons-icon--ion ion-home fa-lg" fixed-width="true" icon="ion-home">'+
          '</ons-icon>'+ data['Details'][i]['varPhysicalAddress'] + 
          '</div>' +
          '</ons-col> ' +
          '</ons-row>' +
          '</ons-list-item>' + 
          '<br>' +


          '<ons-list-item>' +
          '<ons-row class="detail-row">' +
          '<ons-col style="-webkit-box-flex: 0; flex: 0 0 30px; max-width: 30px ; width=30px">' +
              '<ons-icon icon="ion-soup-can" fixed-width="true">' + '</ons-icon>' +
            '</ons-col>' +

             '<ons-col>' +
            '<div class=desc>'+'<ons-icon class="ons-icon ons-icon--ion ion-soup-can fa-lg" fixed-width="true" icon="ion-soup-can">'+
            '</ons-icon>'
            + data['Details'][i]['varPOBOXAddress']+
            '</div>'+
            '</ons-col>'+
            '</ons-row>'+
             '</ons-list-item>'+
             '</ons-list>'+
             '<div class=caw-botton>'+
            '<ons-row class="row ons-row-inner">'+ 
                '<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
                 '<div style="border-right: 1px solid rgba(221,221,221,0.6); padding: 12px 0; background: #0ad046; color: #FFF;">'+
                   '<i class="ion-compose">'+'</i>Book Now</div>'+
               '</ons-col>'+
               '<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
                   '<div style="padding: 12px 0; background: #cccccc; color: #FFF;">'+
                  '<i class="ion-edit">'+
                  '</i>Write a Review</div>'+
               '</ons-col>'+
             '</ons-row>'+
                ' </div>';

                }

                else
                {


   '<div class="app-page-photo">'+   
      '<div class="app-hero">'+
        '<ul class="image ng-scope" rn-carousel="">'+

          '<li style="display: inline-block; transform: translate3d(0%, 0px, 0px);">'+
             '<div class="bgimage" ng-style="{background-image: url("images/gallery/01.png")}" style="background-image: url("images/gallery/01.png");">'+
             '</div>'+
          '</li>'+
          '<li style="display: inline-block; transform: translate3d(100%, 0px, 0px);">'+
             '<div class="bgimage" ng-style="{background-image: url("images/gallery/02.png")}" style="background-image: url("images/gallery/02.png");">'+
             '</div>'+
          '</li>'+
          '<li style="display: inline-block; transform: translate3d(200%, 0px, 0px);">'+
             '<div class="bgimage" ng-style="{background-image: url("images/gallery/03.png")}" style="background-image: url("images/gallery/03.png");">'+
             '</div>'+
          '</li>'+
        '</ul>'+ 
       ' </div>'+
      '</div>'+


      '<ons-list class="app-photo-buttons list ons-list-inner">'+
         '<ons-list-item class="list__item ons-list-item-inner list__item--action-buttons" modifier="action-buttons">'+
            '<ons-row class="action row ons-row-inner">'+

              '<ons-col class="action-col col ons-col-inner">'+ 
              '<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
              '<div class="action-icon">'+
              '<ons-icon class="ons-icon ons-icon--ion ion-android-call fa-lg" icon="ion-android-call">'+
              '</ons-icon>'+
              '</div>'+
              '<div class="action-label">Phone</div>'+
              '</div>'+
              '</ons-col>'+


              '<ons-col class="action-col col ons-col-inner">'+ 
              '<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
              '<div class="action-icon">'+
              '<ons-icon class="ons-icon ons-icon--ion ion-ios-email fa-lg" icon="ion-ios-email">'+
              '</ons-icon>'+
              '</div>'+
              '<div class="action-label">Email</div>'+
              '</div>'+
              '</ons-col>'+



               '<ons-col class="action-col col ons-col-inner" onclick="sendEmail(message.Email, message.subject, message.body)";>'+
              '<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
              '<div class="action-icon">'+
              '<ons-icon class="ons-icon ons-icon--ion ion-earth fa-lg" icon="ion-earth">'+
              '</ons-icon>'+
              '</div>'+
              '<div class="action-label">Website</div>'+
              '</div>'+
              '</ons-col>'+


              '<ons-col class="action-col col ons-col-inner">'+ 
              '<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
              '<div class="action-icon">'+
              '<ons-icon class="ons-icon ons-icon--ion ion-android-share-alt fa-lg" icon="ion-android-share-alt">'+
              '</ons-icon>'+
              '</div>'+
              '<div class="action-label">Share</div>'+
              '</div>'+
              '</ons-col>'+       
            '</ons-row>'+
        '</ons-list-item>'+
      '</ons-list>'+                      





        '<ons-list style="border-top: none;">' +
         '<ons-list-item>' +
         '<ons-row class="detail-row">' +
         '<ons-col style="-webkit-box-flex: 0; flex: 0 0 30px; max-width: 30px ; width=30px">' +
         '<ons-icon icon="fa-map-marker" fixed-width="true">' + '</ons-icon>' +
         '</ons-col>' +
          '<ons-col>' +

          '<div class="desc">'+
          '<ons-icon class="ons-icon fa-map-marker fa fa-lg" fixed-width="true" icon="fa-map-marker">'+
          '</ons-icon>'
          + data['Details'][i]['varCityName']+
          '</div>'+
          '</ons-col>' +
          '</ons-row>' +
          '</ons-list-item>' + '<br>' +


          '<ons-list-item>' +
          '<ons-row class="detail-row">' +
          '<ons-col style="-webkit-box-flex: 0 flex: 0 0 30px max-width: 30px width=30px">' +
          '<ons-icon icon="ion-home" fixed-width="true">'+'</ons-icon>'+
          '</ons-col>' +


          '<ons-col>' +
          '<div class="desc">'+
          '<ons-icon class="ons-icon ons-icon--ion ion-home fa-lg" fixed-width="true" icon="ion-home">'+
          '</ons-icon>'+ data['Details'][i]['varPhysicalAddress'] + 
          '</div>' +
          '</ons-col> ' +
          '</ons-row>' +

          '</ons-list-item>' + 
          '<br>' +


          '<ons-list-item>' +
          '<ons-row class="detail-row">' +
          '<ons-col style="-webkit-box-flex: 0; flex: 0 0 30px; max-width: 30px ; width=30px">' +
              '<ons-icon icon="ion-soup-can" fixed-width="true">' + '</ons-icon>' +
            '</ons-col>' +

            '<ons-col>' +
            '<div class=desc>'+'<ons-icon class="ons-icon ons-icon--ion ion-soup-can fa-lg" fixed-width="true" icon="ion-soup-can">'+
            '</ons-icon>'
            + data['Details'][i]['varPOBOXAddress']+
            '</div>'+
            '</ons-col>'+
            '</ons-row>'+
             '</ons-list-item>'+
             '</ons-list>'+
             '<div class=caw-botton>'+
             '<ons-row class="row ons-row-inner">'+ 
                '<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
                 '<div style="border-right: 1px solid rgba(221,221,221,0.6); padding: 12px 0; background: #0ad046; color: #FFF;">'+
                   '<i class="ion-compose">'+'</i>Book Now</div>'+
               '</ons-col>'+
               '<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
                   '<div style="padding: 12px 0; background: #cccccc; color: #FFF;">'+
                  '<i class="ion-edit">'+
                  '</i>Write a Review</div>'+
               '</ons-col>'+
             '</ons-row>'+
                ' </div>';


                }
            }

//            
//            $scope.call = function (message)
//            {
//                parent.location.href = "tel:{{message.varPhone}}";
//
//            };


            $scope.snippet = Content;

        }).error(function ()
        {
            alert("error");
        });

         $scope.sendEmail = function(email, subject, body){
        var link = "mailto:"+ email
                 + "&subject=New email " + escape(subject);
                 + "&body=" + escape(body); 

        window.location.href = link;
     };

       $scope.openWebsite = function ()
    {
        window.open(url, '_blank', 'location=yes');
    };

        $scope.deliberatelyTrustDangerousSnippet = function ()
        {
            return $sce.trustAsHtml($scope.snippet);
        };
    });

Run Code Online (Sandbox Code Playgroud)

现在没有任何事情发生在它的点击.. !!

Answer 1

pla*_*mut 9

这部分是有问题的(在其他一些):

onclick=openWebsite(url);

Run Code Online (Sandbox Code Playgroud)

你需要使用angular的build-it指令 ng-click

<ons-col ng-click="openWebsite(url)">

Run Code Online (Sandbox Code Playgroud)

如果使用onclick,则为click事件注册本机处理程序,浏览器尝试openWebsite() 在全局(窗口)范围内查找函数(注意:与Angular范围无关),它不存在.

ng-click另一方面,如果您使用,Angular将openWebsite()在相应的范围内搜索该方法,这就是您想要的.

编辑:如果这不起作用,请查看其他一些答案以及可能的原因(例如Angular应用程序没有正确引导).我专注于问题最明显(和IMO最可能的原因).

更新: 现在发布整个控制器,我看到了问题.当您在控制器中动态创建大量HTML片段时,Angular很久以前就完成了处理和引导所有内容.这意味着当您将代码段包含在页面中时,它不会被编译.Angular不处理指令,例如ng-click,不创建范围,不创建范围元素和DOM节点之间的绑定等.

我担心你需要重构你的代码.这个巨大的HTML片段实际上应该包含在您的页面中,这里有很多可能性,例如:

通过ng-include在"main"模板中使用内置指令
通过编写自己的指令来加载HTML作为其模板
通过使用该$compile服务来编译HTML片段,这样,当您只是将HTML作为原始未处理字符串包含时,angular会执行上面提到的所有内容.

说什么是用例的最佳选择并详细描述它超出了最初问题的范围,并且需要太长时间或答案.我建议对Angular做一些更多的研究,并看一些较小的玩具应用程序,以获得使用"正确"模式的一般概念.

归档时间：	10 年，2 月前
查看次数：	7943 次
最近记录：	10 年，2 月前