Question

我是AngularJS的新手，我正在开发移动网络应用程序。我有几个不同视图的id div。（那就是AngularJS如何正常工作？一个HTML页面），我想对特定的id页面使用不同的javascript。因为每个ID页面都应该从互联网上检索json数据对象并显示在那些特定的ID中。

我使用Chart.js图表来显示数据。问题是第一次javascript工作，图表将显示。但不是第二次。

例如：菜单栏 - ＆gt;主页ID |第2页ID |第3页ID

当我使用菜单转到另一页时。然后再次单击主页按钮数据不可见。

我有简单的测试javascript加载。

<script>

    var pieData = [
        {
          value: 300,
          color:"#F7464A",
          highlight: "#FF5A5E",
          label: "Red"
        },
        {
          value: 50,
          color: "#46BFBD",
          highlight: "#5AD3D1",
          label: "Green"
        },
        {
          value: 100,
          color: "#FDB45C",
          highlight: "#FFC870",
          label: "Yellow"
        },
        {
          value: 40,
          color: "#949FB1",
          highlight: "#A8B3C5",
          label: "Grey"
        },
        {
          value: 120,
          color: "#4D5360",
          highlight: "#616774",
          label: "Dark Grey"
        }

      ];

      window.onload = function(){
        var ctx = document.getElementById("chart-area").getContext("2d");
        window.myPie = new Chart(ctx).Pie(pieData);
      };

  </script>

我尝试使用onClick="javascript:refreshID();"来刷新它。没工作

HTML

<ons-list class="menu-list">
        <ons-list-item class="menu-item" onClick="javascript:refreshID();" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
          <ons-icon icon="fa-plus"></ons-icon>
          Home
        </ons-list-item>


 <ons-template id="page1.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="menu.toggle()">
            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center"><br/>Welcome to AquaLife</div>
      </ons-toolbar>

      <ons-row style="margin-top: 100px;">
        <ons-col align="center">

        //Chart
          <div id="canvas-holder">
      <canvas id="chart-area" width="300" height="300"/>
    </div>
//Chart

        </ons-col>
      </ons-row>
    </ons-page>
  </ons-template>

Answer 1

有角度的方法是将refreshID()函数添加到视图的$scope，并使用ng-click来调用它。

Answer 2

不幸的是，这不是angular.js的工作原理，您将需要创建一个将绑定到图表容器的控制器。然后将数据作为控制器的$ scope的属性提供，并为范围设置$ watch属性并将重置功能绑定到它

window.myPie = new Chart(ctx).Pie(pieData);

看起来像

scope.$watch('name', function(ctx, pieData) {

controllerName.myPie = new Chart(ctx).Pie(pieData);
});

和

var ctx = document.getElementById("chart-area").getContext("2d");

位将在控制器初始化中，将ctx设置为另一个属性

这样每次你改变变量中的某些内容时你都会重新初始化

如果您需要更多帮助，请查看： https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope

按钮单击时Angular JS Refresh Specific ID

2 个答案: