jQuery不適用於ng-repeat結果

我正在使用ng-repeat使用jQuery和TB構建手風琴。出於某種原因，這在硬編碼時可以很好地工作，但在ng-repeat指令內部點擊時無法觸發。jQuery不適用於ng-repeat結果

我在想這個問題是從jQuery沒有綁定元素後加載事實。所以，我認爲不是在頁面加載時加載腳本，而是在返回數據時在.success上加載函數會更好。不幸的是，我無法弄清楚如何使這項工作。

測試頁：http://staging.converge.io/test-json

控制器：

function FetchCtrl($scope, $http, $templateCache) { 
     $scope.method = 'GET'; 
     $scope.url = 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=http://www.web.com&key=AIzaSyA5_ykqZChHFiUEc6ztklj9z8i6V6g3rdc'; 
     $scope.key = 'AIzaSyA5_ykqZChHFiUEc6ztklj9z8i6V6g3rdc'; 
     $scope.strategy = 'mobile'; 

     $scope.fetch = function() { 
      $scope.code = null; 
      $scope.response = null; 

      $http({method: $scope.method, url: $scope.url + '&strategy=' + $scope.strategy, cache: $templateCache}). 
      success(function(data, status) { 
       $scope.status = status; 
       $scope.data = data; 
      }). 
      error(function(data, status) { 
       $scope.data = data || "Request failed"; 
       $scope.status = status; 
      }); 
     }; 

    $scope.updateModel = function(method, url) { 
     $scope.method = method; 
     $scope.url = url; 
    }; 
}

HTML：

  <div class="panel-group" id="testAcc"> 

       <div class="panel panel-default" ng-repeat="ruleResult in data.formattedResults.ruleResults"> 
        <div class="panel-heading" toggle-collapse> 
         <h4 class="panel-title"> 
          <a data-toggle="collapse-next" href=""> 
           {{ruleResult.localizedRuleName}} 
          </a> 
         </h4> 
        </div> 
        <div class="panel-collapse collapse"> 
         <div class="panel-body"> 
          <strong>Impact score</strong>: {{ruleResult.ruleImpact*10 | number:0 | orderBy:ruleImpact}} 
         </div> 
        </div> 
       </div> 
      </div>

jQuery的（工程NG重複之外）

$('.panel-heading').on('click', function() { 
    var $target = $(this).next('.panel-collapse'); 

    if ($target.hasClass('collapse')) 
    { 
     $target.collapse('show'); 
    }else{ 
     $target.collapse('hide'); 
    } 
});

感謝您的幫助！

來源

2013-12-09 Joe Conlin

字面上的答案是因爲這些處理程序在運行時綁定，因此.panel-heading不存在。您需要事件代表團

$(".panel").on("click", ".panel-heading", function() {

現在，由於您使用的角度，所有的DOM操作應該是一個指令，而不是jQuery的內部處理！您應該重複ng-click處理程序或簡單的指令。

<div class="panel-heading" toggle-collapse my-cool-directive>

而且該指令代碼：

.directive("myCoolDirective", function() { 
    return { 
     restrict: "A", 
     link: function(scope, elem, attrs) { 
      $(elem).click(function() { 
       var target = $(elem).next(".panel-collapse"); 
       target.hasClass("collapse") ? target.collapse("show") : target.collapse("hide"); 
      }); 
     } 
    } 
});

來源

2013-12-09 22:24:00 tymeJV

這是我一直在尋找的答案，雖然我是Angular的新手，但無法弄清楚如何將自定義指令添加到我的代碼中。從我讀過的所有內容看來，我似乎需要將所有內容都移動到一個模塊中，以便能夠像這樣添加指令？它是否正確？如果是的話，我是否需要改變控制器寫入的方式，因爲我發現它是在模塊的其他代碼中完成的？我真的很想學習在Angular中做到這一點的「正確」方式。再次，對於我在這裏缺乏經驗感到抱歉。謝謝。 –

只需聲明一個新文件'''''''''''''''''''''''''''''''！上面的代碼）' - 在'script'標記中包含'directives.js' – tymeJV

我試過了，但是當我分配了一個模塊名稱（ng-app =「moduleName」）時，我的控制器就中斷了。那是我問是否需要改變控制器才能完成這項工作。 –

角度完成它的渲染後，您可以運行一個jQuery或任何其他JavaScript代碼。有關詳細信息，請參閱此答案：https://stackoverflow.com/a/20421291/2002079

來源

2014-02-17 12:06:40 ahmadalibaloch

當我們使用ng-repeat並需要觸發jquery點擊事件時，只需嘗試此操作即可。

$(document).on("click", ".className", function() { 

    //your code here... 

    });

來源

2016-02-25 11:34:43

jQuery不適用於ng-repeat結果

回答

相關問題