angular.element(id).find()无法找到子标记

时间:2016-03-14 12:50:10

标签: angularjs

我有一个角色项目,在github上托管。它做了它应该做的事情,但是有一段代码应该执行但是没有执行,这里是行

$scope.tabToggled = function(tab){
    $timeout(function(){
   console.log(angular.element('#'+tab));
        angular.element('#'+tab).find('chartist').each(function(i, e)            {                console.log("Updating");
            e.__chartist__.update();
        });
 }, 100);
 };
在这种情况下,

Updating永远不会被打印出来。

<md-tab ng-repeat="(key, value) in allTheCharts" id="{{key}}" label="{{key}}" md-on-select="tabToggled(key)">'
    <chartist class="ct-chart ct-major-eleventh" chartist-data="value.data" chartist-chart-options="value.options" chartist-chart-type="Bar"></chartist>
</md-tab> 

这是上述代码应该运行并给出输出的标记。这是什么问题?

更好地了解代码。检查回购。仅有2个文件index.htmlapp.js

修改
从开发人员控制台看到的DOM

<md-tabs md-selected="selectedIndex" md-dynamic-height="true" class="ng-isolate-scope md-dynamic-height"><md-tabs-wrapper> <md-tab-data>
            <!-- ngRepeat: (key, value) in allTheCharts --><md-tab ng-repeat="(key, value) in allTheCharts" id="TAB_1" label="TAB_1" md-on-select="tabToggled(key)" class="ng-scope ng-isolate-scope"></md-tab><!-- end ngRepeat: (key, value) in allTheCharts --><md-tab ng-repeat="(key, value) in allTheCharts" id="TAB_2" label="TAB_2" md-on-select="tabToggled(key)" class="ng-scope ng-isolate-scope"></md-tab><!-- end ngRepeat: (key, value) in allTheCharts --><md-tab ng-repeat="(key, value) in allTheCharts" id="TAB_3" label="TAB_3" md-on-select="tabToggled(key)" class="ng-scope ng-isolate-scope"></md-tab><!-- end ngRepeat: (key, value) in allTheCharts -->
        </md-tab-data> <!-- ngIf: $mdTabsCtrl.shouldPaginate --> <!-- ngIf: $mdTabsCtrl.shouldPaginate --> <md-tabs-canvas tabindex="0" aria-activedescendant="tab-item-0" ng-focus="$mdTabsCtrl.redirectFocus()" ng-class="{ 'md-paginated': $mdTabsCtrl.shouldPaginate, 'md-center-tabs': $mdTabsCtrl.shouldCenterTabs }" ng-keydown="$mdTabsCtrl.keydown($event)" role="tablist"> <md-pagination-wrapper ng-class="{ 'md-center-tabs': $mdTabsCtrl.shouldCenterTabs }" md-tab-scroll="$mdTabsCtrl.scroll($event)" style="transform: translate3d(0px, 0px, 0px); width: 271px;"> <!-- ngRepeat: tab in $mdTabsCtrl.tabs --><md-tab-item tabindex="-1" class="md-tab ng-scope ng-isolate-scope md-ink-ripple md-active" ng-repeat="tab in $mdTabsCtrl.tabs" role="tab" aria-controls="tab-content-0" aria-selected="true" aria-disabled="false" ng-click="$mdTabsCtrl.select(tab.getIndex())" ng-class="{ 'md-active':    tab.isActive(), 'md-focused':   tab.hasFocus(), 'md-disabled':  tab.scope.disabled }" ng-disabled="tab.scope.disabled" md-swipe-left="$mdTabsCtrl.nextPage()" md-swipe-right="$mdTabsCtrl.previousPage()" md-tabs-template="::tab.label" md-scope="::tab.parent"><span class="ng-binding ng-scope">TAB_1</span></md-tab-item><!-- end ngRepeat: tab in $mdTabsCtrl.tabs --><md-tab-item tabindex="-1" class="md-tab ng-scope ng-isolate-scope md-ink-ripple" ng-repeat="tab in $mdTabsCtrl.tabs" role="tab" aria-controls="tab-content-1" aria-selected="false" aria-disabled="false" ng-click="$mdTabsCtrl.select(tab.getIndex())" ng-class="{ 'md-active':    tab.isActive(), 'md-focused':   tab.hasFocus(), 'md-disabled':  tab.scope.disabled }" ng-disabled="tab.scope.disabled" md-swipe-left="$mdTabsCtrl.nextPage()" md-swipe-right="$mdTabsCtrl.previousPage()" md-tabs-template="::tab.label" md-scope="::tab.parent"><span class="ng-binding ng-scope">TAB_2</span></md-tab-item><!-- end ngRepeat: tab in $mdTabsCtrl.tabs --><md-tab-item tabindex="-1" class="md-tab ng-scope ng-isolate-scope md-ink-ripple" ng-repeat="tab in $mdTabsCtrl.tabs" role="tab" aria-controls="tab-content-2" aria-selected="false" aria-disabled="false" ng-click="$mdTabsCtrl.select(tab.getIndex())" ng-class="{ 'md-active':    tab.isActive(), 'md-focused':   tab.hasFocus(), 'md-disabled':  tab.scope.disabled }" ng-disabled="tab.scope.disabled" md-swipe-left="$mdTabsCtrl.nextPage()" md-swipe-right="$mdTabsCtrl.previousPage()" md-tabs-template="::tab.label" md-scope="::tab.parent"><span class="ng-binding ng-scope">TAB_3</span></md-tab-item><!-- end ngRepeat: tab in $mdTabsCtrl.tabs --> <md-ink-bar style="left: 0px; right: 181px;"></md-ink-bar> </md-pagination-wrapper> <div class="md-visually-hidden md-dummy-wrapper"> <!-- ngRepeat: tab in $mdTabsCtrl.tabs --><md-dummy-tab class="md-tab ng-scope ng-isolate-scope" tabindex="-1" id="tab-item-0" role="tab" aria-controls="tab-content-0" aria-selected="true" aria-disabled="false" ng-focus="$mdTabsCtrl.hasFocus = true" ng-blur="$mdTabsCtrl.hasFocus = false" ng-repeat="tab in $mdTabsCtrl.tabs" md-tabs-template="::tab.label" md-scope="::tab.parent"><span class="ng-binding ng-scope">TAB_1</span></md-dummy-tab><!-- end ngRepeat: tab in $mdTabsCtrl.tabs --><md-dummy-tab class="md-tab ng-scope ng-isolate-scope" tabindex="-1" id="tab-item-1" role="tab" aria-controls="tab-content-1" aria-selected="false" aria-disabled="false" ng-focus="$mdTabsCtrl.hasFocus = true" ng-blur="$mdTabsCtrl.hasFocus = false" ng-repeat="tab in $mdTabsCtrl.tabs" md-tabs-template="::tab.label" md-scope="::tab.parent"><span class="ng-binding ng-scope">TAB_2</span></md-dummy-tab><!-- end ngRepeat: tab in $mdTabsCtrl.tabs --><md-dummy-tab class="md-tab ng-scope ng-isolate-scope" tabindex="-1" id="tab-item-2" role="tab" aria-controls="tab-content-2" aria-selected="false" aria-disabled="false" ng-focus="$mdTabsCtrl.hasFocus = true" ng-blur="$mdTabsCtrl.hasFocus = false" ng-repeat="tab in $mdTabsCtrl.tabs" md-tabs-template="::tab.label" md-scope="::tab.parent"><span class="ng-binding ng-scope">TAB_3</span></md-dummy-tab><!-- end ngRepeat: tab in $mdTabsCtrl.tabs --> </div> </md-tabs-canvas> </md-tabs-wrapper> <md-tabs-content-wrapper ng-show="$mdTabsCtrl.hasContent &amp;&amp; $mdTabsCtrl.selectedIndex >= 0" aria-hidden="false" class=""> <!-- ngRepeat: (index, tab) in $mdTabsCtrl.tabs --><!-- ngIf: $mdTabsCtrl.hasContent --><md-tab-content id="tab-content-0" role="tabpanel" aria-labelledby="tab-item-0" md-swipe-left="$mdTabsCtrl.swipeContent &amp;&amp; $mdTabsCtrl.incrementIndex(1)" md-swipe-right="$mdTabsCtrl.swipeContent &amp;&amp; $mdTabsCtrl.incrementIndex(-1)" ng-if="$mdTabsCtrl.hasContent" ng-repeat="(index, tab) in $mdTabsCtrl.tabs" ng-class="{ 'md-no-transition': $mdTabsCtrl.lastSelectedIndex == null, 'md-active':        tab.isActive(), 'md-left':          tab.isLeft(), 'md-right':         tab.isRight(), 'md-no-scroll':     $mdTabsCtrl.dynamicHeight }" class="ng-scope md-no-transition md-active md-no-scroll"> <!-- ngIf: $mdTabsCtrl.enableDisconnect || tab.shouldRender() --><div md-tabs-template="::tab.template" md-connected-if="tab.isActive()" md-scope="::tab.parent" ng-if="$mdTabsCtrl.enableDisconnect || tab.shouldRender()" class="ng-scope ng-isolate-scope">
                <chartist class="ct-chart ct-major-eleventh ng-scope ng-isolate-scope" chartist-data="value.data" chartist-chart-options="value.options" chartist-chart-type="Bar"><svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-bar" style="width: 100%; height: 100%;"><g class="ct-grids"><line x1="50" x2="50" y1="15" y2="312.625" class="ct-grid ct-horizontal"></line><line x1="222.4" x2="222.4" y1="15" y2="312.625" class="ct-grid ct-horizontal"></line><line x1="394.8" x2="394.8" y1="15" y2="312.625" class="ct-grid ct-horizontal"></line><line x1="567.2" x2="567.2" y1="15" y2="312.625" class="ct-grid ct-horizontal"></line><line x1="739.6" x2="739.6" y1="15" y2="312.625" class="ct-grid ct-horizontal"></line><line y1="312.625" y2="312.625" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="263.0208333333333" y2="263.0208333333333" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="213.41666666666669" y2="213.41666666666669" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="163.8125" y2="163.8125" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="114.20833333333334" y2="114.20833333333334" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="64.60416666666666" y2="64.60416666666666" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="15" y2="15" x1="50" x2="912" class="ct-grid ct-vertical"></line></g><g><g class="ct-series ct-series-a"><line x1="136.2" x2="136.2" y1="312.625" y2="292.78333333333336" class="ct-bar" value="1"></line><line x1="308.6" x2="308.6" y1="312.625" y2="114.20833333333334" class="ct-bar" value="10"></line><line x1="481" x2="481" y1="312.625" y2="54.68333333333334" class="ct-bar" value="13"></line><line x1="653.4000000000001" x2="653.4000000000001" y1="312.625" y2="213.41666666666669" class="ct-bar" value="5"></line><line x1="825.8000000000001" x2="825.8000000000001" y1="312.625" y2="253.1" class="ct-bar" value="3"></line></g></g><g class="ct-labels"><foreignObject style="overflow: visible;" x="50" y="317.625" width="172.4" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 172px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Mon</span></foreignObject><foreignObject style="overflow: visible;" x="222.4" y="317.625" width="172.4" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 172px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Tue</span></foreignObject><foreignObject style="overflow: visible;" x="394.8" y="317.625" width="172.40000000000003" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 172px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Wed</span></foreignObject><foreignObject style="overflow: visible;" x="567.2" y="317.625" width="172.39999999999998" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 172px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Thur</span></foreignObject><foreignObject style="overflow: visible;" x="739.6" y="317.625" width="172.39999999999998" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 172px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Fri</span></foreignObject><foreignObject style="overflow: visible;" y="263.0208333333333" x="10" height="49.604166666666664" width="30"><span class="ct-label ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">0</span></foreignObject><foreignObject style="overflow: visible;" y="213.41666666666666" x="10" height="49.604166666666664" width="30"><span class="ct-label ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">2.5</span></foreignObject><foreignObject style="overflow: visible;" y="163.8125" x="10" height="49.60416666666667" width="30"><span class="ct-label ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">5</span></foreignObject><foreignObject style="overflow: visible;" y="114.20833333333334" x="10" height="49.60416666666666" width="30"><span class="ct-label ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">7.5</span></foreignObject><foreignObject style="overflow: visible;" y="64.60416666666666" x="10" height="49.604166666666686" width="30"><span class="ct-label ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">10</span></foreignObject><foreignObject style="overflow: visible;" y="15" x="10" height="49.60416666666666" width="30"><span class="ct-label ct-vertical ct-start" style="height: 50px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">12.5</span></foreignObject><foreignObject style="overflow: visible;" y="-15" x="10" height="30" width="30"><span class="ct-label ct-vertical ct-start" style="height: 30px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">15</span></foreignObject></g></svg></chartist>
            </div><!-- end ngIf: $mdTabsCtrl.enableDisconnect || tab.shouldRender() --> </md-tab-content><!-- end ngIf: $mdTabsCtrl.hasContent --><!-- end ngRepeat: (index, tab) in $mdTabsCtrl.tabs --><!-- ngIf: $mdTabsCtrl.hasContent --><md-tab-content id="tab-content-1" role="tabpanel" aria-labelledby="tab-item-1" md-swipe-left="$mdTabsCtrl.swipeContent &amp;&amp; $mdTabsCtrl.incrementIndex(1)" md-swipe-right="$mdTabsCtrl.swipeContent &amp;&amp; $mdTabsCtrl.incrementIndex(-1)" ng-if="$mdTabsCtrl.hasContent" ng-repeat="(index, tab) in $mdTabsCtrl.tabs" ng-class="{ 'md-no-transition': $mdTabsCtrl.lastSelectedIndex == null, 'md-active':        tab.isActive(), 'md-left':          tab.isLeft(), 'md-right':         tab.isRight(), 'md-no-scroll':     $mdTabsCtrl.dynamicHeight }" class="ng-scope md-no-transition md-right md-no-scroll"> <!-- ngIf: $mdTabsCtrl.enableDisconnect || tab.shouldRender() --><div md-tabs-template="::tab.template" md-connected-if="tab.isActive()" md-scope="::tab.parent" ng-if="$mdTabsCtrl.enableDisconnect || tab.shouldRender()" class="ng-scope ng-isolate-scope">
                <chartist class="ct-chart ct-major-eleventh ng-scope ng-isolate-scope" chartist-data="value.data" chartist-chart-options="value.options" chartist-chart-type="Bar"><svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-bar" style="width: 100%; height: 100%;"><g class="ct-grids"><line x1="50" x2="50" y1="15" y2="312.625" class="ct-grid ct-horizontal"></line><line x1="222.4" x2="222.4" y1="15" y2="312.625" class="ct-grid ct-horizontal"></line><line x1="394.8" x2="394.8" y1="15" y2="312.625" class="ct-grid ct-horizontal"></line><line x1="567.2" x2="567.2" y1="15" y2="312.625" class="ct-grid ct-horizontal"></line><line x1="739.6" x2="739.6" y1="15" y2="312.625" class="ct-grid ct-horizontal"></line><line y1="312.625" y2="312.625" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="275.421875" y2="275.421875" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="238.21875" y2="238.21875" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="201.015625" y2="201.015625" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="163.8125" y2="163.8125" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="126.609375" y2="126.609375" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="89.40625" y2="89.40625" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="52.203125" y2="52.203125" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="15" y2="15" x1="50" x2="912" class="ct-grid ct-vertical"></line></g><g><g class="ct-series ct-series-a"><line x1="136.2" x2="136.2" y1="312.625" y2="238.21875" class="ct-bar" value="20"></line><line x1="308.6" x2="308.6" y1="312.625" y2="275.421875" class="ct-bar" value="10"></line><line x1="481" x2="481" y1="312.625" y2="201.015625" class="ct-bar" value="30"></line><line x1="653.4000000000001" x2="653.4000000000001" y1="312.625" y2="163.8125" class="ct-bar" value="40"></line><line x1="825.8000000000001" x2="825.8000000000001" y1="312.625" y2="15" class="ct-bar" value="80"></line></g></g><g class="ct-labels"><foreignObject style="overflow: visible;" x="50" y="317.625" width="172.4" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 172px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Mon</span></foreignObject><foreignObject style="overflow: visible;" x="222.4" y="317.625" width="172.4" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 172px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Tue</span></foreignObject><foreignObject style="overflow: visible;" x="394.8" y="317.625" width="172.40000000000003" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 172px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Wed</span></foreignObject><foreignObject style="overflow: visible;" x="567.2" y="317.625" width="172.39999999999998" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 172px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Thur</span></foreignObject><foreignObject style="overflow: visible;" x="739.6" y="317.625" width="172.39999999999998" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 172px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Fri</span></foreignObject><foreignObject style="overflow: visible;" y="275.421875" x="10" height="37.203125" width="30"><span class="ct-label ct-vertical ct-start" style="height: 37px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">0</span></foreignObject><foreignObject style="overflow: visible;" y="238.21875" x="10" height="37.203125" width="30"><span class="ct-label ct-vertical ct-start" style="height: 37px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">10</span></foreignObject><foreignObject style="overflow: visible;" y="201.015625" x="10" height="37.203125" width="30"><span class="ct-label ct-vertical ct-start" style="height: 37px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">20</span></foreignObject><foreignObject style="overflow: visible;" y="163.8125" x="10" height="37.203125" width="30"><span class="ct-label ct-vertical ct-start" style="height: 37px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">30</span></foreignObject><foreignObject style="overflow: visible;" y="126.609375" x="10" height="37.203125" width="30"><span class="ct-label ct-vertical ct-start" style="height: 37px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">40</span></foreignObject><foreignObject style="overflow: visible;" y="89.40625" x="10" height="37.203125" width="30"><span class="ct-label ct-vertical ct-start" style="height: 37px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">50</span></foreignObject><foreignObject style="overflow: visible;" y="52.203125" x="10" height="37.203125" width="30"><span class="ct-label ct-vertical ct-start" style="height: 37px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">60</span></foreignObject><foreignObject style="overflow: visible;" y="15" x="10" height="37.203125" width="30"><span class="ct-label ct-vertical ct-start" style="height: 37px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">70</span></foreignObject><foreignObject style="overflow: visible;" y="-15" x="10" height="30" width="30"><span class="ct-label ct-vertical ct-start" style="height: 30px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">80</span></foreignObject></g></svg></chartist>
            </div><!-- end ngIf: $mdTabsCtrl.enableDisconnect || tab.shouldRender() --> </md-tab-content><!-- end ngIf: $mdTabsCtrl.hasContent --><!-- end ngRepeat: (index, tab) in $mdTabsCtrl.tabs --><!-- ngIf: $mdTabsCtrl.hasContent --><md-tab-content id="tab-content-2" role="tabpanel" aria-labelledby="tab-item-2" md-swipe-left="$mdTabsCtrl.swipeContent &amp;&amp; $mdTabsCtrl.incrementIndex(1)" md-swipe-right="$mdTabsCtrl.swipeContent &amp;&amp; $mdTabsCtrl.incrementIndex(-1)" ng-if="$mdTabsCtrl.hasContent" ng-repeat="(index, tab) in $mdTabsCtrl.tabs" ng-class="{ 'md-no-transition': $mdTabsCtrl.lastSelectedIndex == null, 'md-active':        tab.isActive(), 'md-left':          tab.isLeft(), 'md-right':         tab.isRight(), 'md-no-scroll':     $mdTabsCtrl.dynamicHeight }" class="ng-scope md-no-transition md-right md-no-scroll"> <!-- ngIf: $mdTabsCtrl.enableDisconnect || tab.shouldRender() --><div md-tabs-template="::tab.template" md-connected-if="tab.isActive()" md-scope="::tab.parent" ng-if="$mdTabsCtrl.enableDisconnect || tab.shouldRender()" class="ng-scope ng-isolate-scope">
                <chartist class="ct-chart ct-major-eleventh ng-scope ng-isolate-scope" chartist-data="value.data" chartist-chart-options="value.options" chartist-chart-type="Bar"><svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-bar" style="width: 100%; height: 100%;"><g class="ct-grids"><line x1="50" x2="50" y1="15" y2="312.625" class="ct-grid ct-horizontal"></line><line x1="222.4" x2="222.4" y1="15" y2="312.625" class="ct-grid ct-horizontal"></line><line x1="394.8" x2="394.8" y1="15" y2="312.625" class="ct-grid ct-horizontal"></line><line x1="567.2" x2="567.2" y1="15" y2="312.625" class="ct-grid ct-horizontal"></line><line x1="739.6" x2="739.6" y1="15" y2="312.625" class="ct-grid ct-horizontal"></line><line y1="312.625" y2="312.625" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="270.10714285714283" y2="270.10714285714283" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="227.58928571428572" y2="227.58928571428572" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="185.07142857142856" y2="185.07142857142856" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="142.55357142857142" y2="142.55357142857142" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="100.03571428571428" y2="100.03571428571428" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="57.51785714285714" y2="57.51785714285714" x1="50" x2="912" class="ct-grid ct-vertical"></line><line y1="15" y2="15" x1="50" x2="912" class="ct-grid ct-vertical"></line></g><g><g class="ct-series ct-series-a"><line x1="136.2" x2="136.2" y1="312.625" y2="304.12142857142857" class="ct-bar" value="1"></line><line x1="308.6" x2="308.6" y1="312.625" y2="227.58928571428572" class="ct-bar" value="10"></line><line x1="481" x2="481" y1="312.625" y2="23.503571428571433" class="ct-bar" value="34"></line><line x1="653.4000000000001" x2="653.4000000000001" y1="312.625" y2="270.10714285714283" class="ct-bar" value="5"></line><line x1="825.8000000000001" x2="825.8000000000001" y1="312.625" y2="287.1142857142857" class="ct-bar" value="3"></line></g></g><g class="ct-labels"><foreignObject style="overflow: visible;" x="50" y="317.625" width="172.4" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 172px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Mon</span></foreignObject><foreignObject style="overflow: visible;" x="222.4" y="317.625" width="172.4" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 172px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Tue</span></foreignObject><foreignObject style="overflow: visible;" x="394.8" y="317.625" width="172.40000000000003" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 172px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Wed</span></foreignObject><foreignObject style="overflow: visible;" x="567.2" y="317.625" width="172.39999999999998" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 172px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Thur</span></foreignObject><foreignObject style="overflow: visible;" x="739.6" y="317.625" width="172.39999999999998" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 172px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Fri</span></foreignObject><foreignObject style="overflow: visible;" y="270.10714285714283" x="10" height="42.517857142857146" width="30"><span class="ct-label ct-vertical ct-start" style="height: 43px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">0</span></foreignObject><foreignObject style="overflow: visible;" y="227.5892857142857" x="10" height="42.517857142857146" width="30"><span class="ct-label ct-vertical ct-start" style="height: 43px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">5</span></foreignObject><foreignObject style="overflow: visible;" y="185.07142857142858" x="10" height="42.51785714285714" width="30"><span class="ct-label ct-vertical ct-start" style="height: 43px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">10</span></foreignObject><foreignObject style="overflow: visible;" y="142.5535714285714" x="10" height="42.51785714285715" width="30"><span class="ct-label ct-vertical ct-start" style="height: 43px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">15</span></foreignObject><foreignObject style="overflow: visible;" y="100.03571428571428" x="10" height="42.51785714285714" width="30"><span class="ct-label ct-vertical ct-start" style="height: 43px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">20</span></foreignObject><foreignObject style="overflow: visible;" y="57.51785714285714" x="10" height="42.51785714285714" width="30"><span class="ct-label ct-vertical ct-start" style="height: 43px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">25</span></foreignObject><foreignObject style="overflow: visible;" y="15" x="10" height="42.51785714285714" width="30"><span class="ct-label ct-vertical ct-start" style="height: 43px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">30</span></foreignObject><foreignObject style="overflow: visible;" y="-15" x="10" height="30" width="30"><span class="ct-label ct-vertical ct-start" style="height: 30px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">35</span></foreignObject></g></svg></chartist>
            </div><!-- end ngIf: $mdTabsCtrl.enableDisconnect || tab.shouldRender() --> </md-tab-content><!-- end ngIf: $mdTabsCtrl.hasContent --><!-- end ngRepeat: (index, tab) in $mdTabsCtrl.tabs --> </md-tabs-content-wrapper></md-tabs>

1 个答案:

答案 0 :(得分:1)

最简单的解决方案可能是为chartist元素分配一个ID:

<chartist id="chart-{{key}}" 

在JavaScript中,您可以通过id引用元素:

    $scope.tabToggled = function(tab) {
        console.log(angular.element('#chart-'+tab));
        $('#chart'+tab).each(function(i, e) {
            console.log("Updating");
            e.__chartist__.update();
        });

如果key包含非法字符,则可以改为使用索引:

<md-tab ng-repeat="(key, value) in allTheCharts" md-on-select="tabToggled($index)">
  <chartist id="chart-{{$index}}"