如何让脚本识别模板 node-red 中的范围？

Question

我在节点中有此代码-red.i 想向其中添加模板节点。我认为脚本不知道范围是什么 is.when 我通过 jquery 记录一个值 returns null.and 我得到这个 error:can 未读属性 null.and 的 innerhtml 我记录了范围，所有的 id 都是 null.i 不知道如何修复 it.it 是必要的。请帮助。

我发送给它的数据是这样的：msg.payload = "{"power":[12,14,13,14],"switch":["ON"]}"

<div class="bg">
<div id="container" class="row">
    <div class="col-md-6">
        <div class="plan col-md-4">
            <h3 id="voltage1"><span class="status1">OFF</span></h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1:</b></li>
                <li><b>P2:</b></li>
                <li><b>P3:</b></li>
                <li><b>N:</b></li>
            </ul>
        </div>
    </div>
    <div class="col-md-6">
        <div class="plan col-md-4">
            <h3 id="voltage2"><span class="status2">OFF</span></h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1:</b></li>
                <li><b>P2:</b></li>
                <li><b>P3:</b></li>
                <li><b>N:</b></li>
            </ul>
        </div>
    </div>
    <div class="col-md-6">
        <div class="plan col-md-4">
            <h3 id="voltage3"><span class="status3">OFF</span></h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1:</b></li>
                <li><b>P2:</b></li>
                <li><b>P3:</b></li>
                <li><b>N:</b></li>
            </ul>
        </div>
    </div>
    <div class="col-md-6">
        <div class="plan col-md-4">
            <h3 id="voltage4"><span class="status4">OFF</span></h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1:</b></li>
                <li><b>P2:</b></li>
                <li><b>P3:</b></li>
                <li><b>N:</b></li>
            </ul>
        </div>
    </div>
    <div class="col-md-6">
        <div class="plan col-md-4">
            <h3 id="voltage5"><span class="status5">OFF</span></h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1:</b></li>
                <li><b>P2:</b></li>
                <li><b>P3:</b></li>
                <li><b>N:</b></li>
            </ul>
        </div>
    </div>
    <div class="col-md-6">
        <div class="plan col-md-4">
            <h3 id="voltage6"><span class="status6">OFF</span></h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1:</b></li>
                <li><b>P2:</b></li>
                <li><b>P3:</b></li>
                <li><b>N:</b></li>
            </ul>
        </div>
    </div>


</div>

<script>
$(document).ready(function (scope) {
    (function (scope) {
        function blinker() {
            $('span').fadeOut(500);
            $('span').fadeIn(500);
        }

        setInterval(blinker, 1000);
        scope.$watch('msg', function (msg) {
            var data = JSON.parse(msg.payload)
            console.log(scope)
            for (var i = 1; i < 7; i++) {
                document.getElementById('#voltage' + i).innerHTML = "Voltage :" + data.power[i]
                if (data.switch[i] == 'ON') {
                    $('.status' + i).css("color", "green");
                    document.getElementsByClassName('.status' + i).innerHTML = 'ON'
                }
            }
        })
    })(scope)
})

Answer 1

仪表板已经使用 Angular 小部件、模型和逻辑将 msg.payload 信息呈现到浏览器的 DOM 中。与其尝试使用 JQuery 操作 HTML 元素，不如将一组开关数据对象传递到单个容器中，使用 ng-repeat 创建尽可能多的 div 以显示所有开关。

例如，如果您将这 3 组数据放在一个 msg.payload 数组中：

[
  {
    "Switch": "ON",
    "Voltage": 117.5,
    "P1": 2.34,
    "P2": 3.45,
    "P3": 1.23,
    "N": 0.12
  },
  {
    "Switch": "OFF",
    "Voltage": 0,
    "P1": 0.02,
    "P2": 0.03,
    "P3": 0.12,
    "N": 0
  },
  {
    "Switch": "ON",
    "Voltage": 125,
    "P1": 0.34,
    "P2": 0.45,
    "P3": 0.23,
    "N": 0.25
  }
]

您可以直接将其传递给 ui_template 节点，使用此 Angular 代码：

<style>
    span.ON { color: green; }
    span.OFF { color: red; }
</style>

<div class="bg">
<div id="container" class="row">
    <div class="col-md-6" ng-repeat="row in msg.payload">
        <div class="plan col-md-4">
            <h3>
                {{$index+1}}.
                <span ng-class="row.Switch">{{row.Switch}}</span>
                <span ng-if="row.Switch == 'ON'">
                    Voltage : {{row.Voltage}}
                </span>
            </h3>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1: </b>{{row.P1}}</li>
                <li><b>P2: </b>{{row.P2}}</li>
                <li><b>P3: </b>{{row.P3}}</li>
                <li><b>N: </b>{{row.N}}</li>
            </ul>
        </div>
    </div>
</div>
</div>

渲染这个：

无需弄乱 scope.$watch() 或创建 7 个几乎相同的 html 元素部分，这些部分需要使用 JQuery...

进行操作

任何时候其中一个开关的状态更新，只需重新发送整个数据数组——Angular 负责更新 DOM 以匹配您的数据，并将甚至重用现有元素，或根据需要 insert/update/delete 它们。

如何让脚本识别模板 node-red 中的范围？

how to make script recognize scope in template node-red?

html

jquery

angularjs

node-red