如何通过值类型为 uuid 的属性隔离作用域

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 的属性隔离作用域

How isolate scope by attribute with value type uuid

angularjs

angularjs-directive

angularjs-scope

index.html

script.js

server.json