的jQuery沒有找到與NG-repeat元素

我有ng-repeat一個觀點：的jQuery沒有找到與NG-repeat元素

<div ng-controller="LogBtnCtrl"> 
    <li class="item log-btn" ng-repeat="logItem in logBtns"> 
    <div class="log-btn--graph">5,3,9,6,5,9,7</div> 
    </li> 
</div>

我想打電話給jQuery('.log-btn--graph')視圖之後被渲染。

angular.controller('LogBtnCtrl', function($scope, TodayLogBtns) { 
    $scope.logBtns = [0,1,2,3,4]; 

    $scope.$watch('logBtns', 
    function() { 
     console.log('a', $('.log-btn--graph').length); 
    }); 

    console.log('b', $('.log-btn--graph').length); 
});

但它給b 0和a 0。

渲染視圖後，我可以在控制檯中手動將$('.log-btn--graph').length設置爲5。

所以我想當我打電話給b和a，視圖還沒有呈現。那麼，我應該在哪裏撥打$('.log-btn--graph').length以確保它是5？

來源

2016-01-28 Ovilia

這應該在DDO做，你有一個合法的標記...... :( – Jai

DOM代碼在控制器不屬於.....需要在指示。控制器在編譯視圖之前運行。什麼是jQuery的？ – charlietfl

爲什麼不檢查'$ scope.logBtns.length'？ – Jai

由於您的控制器方法中有一個$watch。因此，而不是尋找DOM節點有手錶在收藏：

angular.controller('LogBtnCtrl', function($scope, TodayLogBtns) { 
    $scope.logBtns = [0,1,2,3,4]; 

    $scope.$watch('logBtns', 
    function() { 
     console.log('a', $scope.logBtns.length); 
    }); 

    console.log('b', $scope.logBtns.length); 
});

我會提到，你有一個合法的標記，li元素應該是ul直接孩子：

<div ng-controller="LogBtnCtrl"> 
    <ul> 
     <li class="item log-btn" ng-repeat="logItem in logBtns"> 
     <div data-button class="log-btn--graph">5,3,9,6,5,9,7</div> 
    </li> 
    </ul> 
</div>

上面你可以看到有兩個變化：（1）：增加了一個<ul>和（2）：增加了一個屬性data-button。現在，這是可以做到：

(function(){ 
    var app = angular.module('theApp',[]); 
    app.controller('LogBtnCtrl', function($scope, TodayLogBtns) { 
     $scope.logBtns = [0,1,2,3,4]; 

     $scope.$watch('logBtns', function() { 
      console.log('a', $scope.logBtns.length); 
     }); 

     console.log('b', $scope.logBtns.length); 
    }); 

    app.directive('button', function(){ 
     return { 
      restrict:'A', 
      link:function(scope, elem, attrs){ 
       // here elem is div with attribute 'data-button' so: 
       elem.button(); 
       // angular.element(elem).button(); // with jqLite 
       // $(elem).button(); 
      } 
     }; 
    }); 

})();

來源

2016-01-28 11:04:38 Jai

那麼如何使用DOM元素調用jQuery？我需要類似'$（'。button'）。button（）'的東西。 – Ovilia

謝謝！它現在有效。 :) – Ovilia

$（'。log-btn - graph'）'會在每次實例觸發時影響整個頁面中的每個類。集合中的第一個將插件應用到它多次。更好地使用'elem.button（）' – charlietfl

使用jQuery和AngularJS在一起產生類似的非更新數據綁定的一些問題（閱讀$消化文檔，$應用等進一步的細節）。

一個更好的形式給出了是在控制器中直接使用的數據模型（$範圍數據）（例如

console.log(logBtns.length)

來源

2016-01-28 11:28:56 Sebastian

你不需要手錶任何的這個，如果你正在做的是改變個人重複中的元素

您使用了一個指令，因爲它可以確保元素在操作代碼運行之前退出，指令還允許您直接訪問元素本身......當jQuery時它將成爲jQuery對象可在頁面中找到。

app.directive('jq-button', function(){ 
    return {   
     link:function(scope, elem, attrs){ 
      // elem is a jQuery object 
      elem.button(); 
     } 
    }; 
});

HTML

<div class="log-btn--graph" jq-button>5,3,9,6,5,9,7</div>

來源

2016-01-28 11:49:11 charlietfl

的jQuery沒有找到與NG-repeat元素

回答

相關問題