ReferenceError：函数未在javascript中定义

Question

你好我是javascript和angularjs的新手，我在我的comtroller中打开一个网站开了一个函数，我在按钮的“onclick”上调用该函数“，我得到 ReferenceError：openWebsite is未定义当我尝试这样做时，我的代码如下，请提前帮助我解决此问题。

控制器

     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);
        };
    });

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

Answer 1

这部分是有问题的（在其他几个中）：

onclick=openWebsite(url);

您需要使用angular＆＃39; s build-it指令ng-click

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

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

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

编辑：如果这不起作用，请查看其他一些答案以及可能的原因（例如，Angular应用程序未正确引导）。我专注于问题的最明显（和IMO最可能的原因）。

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

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

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

说出用例的最佳选项并详细描述它超出了初始问题的范围，并且需要太长时间或答案。我建议对Angular做一些更多的研究，并看一些较小的玩具应用程序来获得关于＆＃34;对＆＃34;要使用的模式。

Answer 2

您可以使用提供的代码查看以下几点：

确保已将ng-app和ng-controller分配给包含您正在调用该函数的元素的元素，并使用适当的控制器和模块名称来定义openWebsite。

正如@Quentin所说的，还要使用ng-click而不是onClick

您的函数没有参数，但在调用时：

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

这不是主要原因，但应予以检查。

Answer 3

在openwebsite（）中未收到

变量。写

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

并使用ng-click =“openwebsite（url）”而不是onclick =“openwebsite（url）”

Answer 4

对于Angular，您应该使用（click）=“ signUpwithEmail（）”

示例

 <ion-button (click)="signUpwithEmail()">
          Sign up with Email
 </ion-button>