Angular JS点击时刷新具体ID

Question

我是AngularJS新手，我正在开发移动web应用程序。我有几个不同视图的id div。(这就是AngularJS的工作方式，对吧？)一个HTML页面)，我想对特定的id页面使用不同的javascript。因为每个ID页面都应该从internet检索json数据对象，并在特定的ID中显示。

我正在使用Chart.js图表来显示数据。问题是javascript作品和图表将第一次显示出来。但不是第二次。

例如:菜单栏-->主页ID |第2页ID |第3页ID

当我使用菜单转到另一个页面时。然后再次单击Home按钮Data not visible。

我有简单的测试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