Question

我想制作一个带小部件的仪表板。必须在窗口小部件上显示的数据（json对象）每隔n秒由ajax请求从服务器凸出。每个小部件都有uuid类型标识符。我已经尝试使用指令隔离范围，但它不适用于uuid类型。这是我的Plunker示例。

如何使此代码正常工作？
或者也许有更好的方法来使用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>

的script.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}
}

Answer 1

更改你的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

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

如何使用值类型uuid隔离范围

的index.html

的script.js

server.json

1 个答案: