如何通过属性与值类型UUID隔离范围

我想用小部件制作仪表板。每秒钟，必须通过AJAX请求从服务器上显示的数据（JSON对象）。每个小部件都有UUID类型标识符。我尝试使用指令隔离范围，但是它与UUID类型相关。这是我的示例。

如何使此代码工作？
还是有更好的方法可以通过Angularjs实现这一目标？

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="dashboard">
  <div ng-controller="widgetController as ctrl">
    <widget id="ctrl.cbdf9d33-8d7a-43f7-a8b5-5b011edd2402"></widget>
    <widget id="ctrl.5ed23c32-a443-45eb-932e-8ff1d23a912f"></widget>
    <widget id="ctrl.2de16396-88a3-48cd-b42a-bc30bdd80064"></widget>
  </div>
</body>
</html>

脚本.js

(function(angular) {
  'use strict';
  angular.module('dashboard', [])
    .controller('widgetController', ['$interval', '$http', function($interval, $http) {
      var vm = this;
      var updateWidgetsLoop = $interval(function() {
        $http({
          method: 'GET',
          url: 'server.json'
        }).then(function successCallback(response) {
          var widgets = response.data;
          angular.forEach(widgets, function(widget, key) {
            vm[key] = widget;
          });
        });
      }, 5000);
    }])
    .directive('widget', function() {
      return {
        restrict: 'E',
        scope: {
          id: '='
        },
        template: '<div>{{id.value}}</div>',
      };
    });
})(window.angular);

server.json

{
 "cbdf9d33-8d7a-43f7-a8b5-5b011edd2402" : {"value": 10},
 "5ed23c32-a443-45eb-932e-8ff1d23a912f" : {"value": 20},
 "2de16396-88a3-48cd-b42a-bc30bdd80064" : {"value": 30}
}

更改html代码

<widget id="ctrl.cbdf9d33-8d7a-43f7-a8b5-5b011edd2402"></widget>

<widget id="ctrl['cbdf9d33-8d7a-43f7-a8b5-5b011edd2402']"></widget>

它应该起作用。祝你好运： - ）

工作plunker https://plnkr.co/edit/smjtaitdb7lrgxu0gbip?p=preview

希望它能解决您的问题： - ）

index.html

脚本.js

server.json

相关内容

最新更新

热门标签：