无法将范围变量绑定到角度js中的html元素

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无法将范围变量绑定到角度js中的html元素相关的知识,希望对你有一定的参考价值。

我从$scope.getPIRData函数获得了一些像“OPEN”或“CLOSE”这样的值,我存储在$scope.pirstatus中,我试图在html Header中显示tag<h1> {{pirstatus}}</h1>但是它在按钮点击时没有显示任何内容javascript document.getelementbyid

 <!DOCTYPE html>
    <html ng-app="PIR_Detection">
    <head>
        <meta charset="utf-8" />
        <title>PIR Door Monitoring</title>
        <script>document.write('<base href="' + document.location + '" />');</script>
        <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    </head>
    <body ng-controller="myCtrl">
        <div class="col-sm-4 col-lg-offset-4" ng-controller="myCtrl">
            <select class="form-control" ng-model="sel_val" ng-change="getPIRData(sel_val.deveui)" ng-options="data.deveui for data in Customers">Select PIR Device</select>
        </div>
        <br />
        <span style="font-size:14px" id="pirstatus"></span>
        <h1> {{pirstatus}}</h1>
        <span ng-bind="pirstatus"></span> 
        <script>
            var app = angular.module('PIR_Detection', []);
            app.controller('myCtrl', function ($scope, $http, $window) {
                $scope.sel_val = 0;
                $scope.DefaultLabel = "Loading.....";
                var post = $http({
                    method: "get",
                    url: "../data.json",
                    dataType: 'json',
                    data: {},
                    headers: { "Content-Type": "application/json" }
                });
                post.success(function (data, status) {
                    $scope.Customers = data;
                });
                post.error(function (data, status) {
                });
                $scope.getPIRData = function (id) {
                    var url = "/PIRDetails/GetPIRStatus/" + id;
                    $http.get(url)
                        .then(function (response) {
                            $scope.myWelcome = response.data;
                            $scope.pirstatus = base64toHEX($scope.myWelcome.dataFrame);
                            document.getElementById("pirstatus").innerHTML = $scope.pirstatus;
                        });
                };
            });


        </script>

    </body>
    </html>
答案

您可以尝试使用AngularJS中的ng-bind属性。在你的代码中,如果你修改h1标签<h1 ng-bind="pirstatus"></h1>,下面应该工作请参考这个例子 - https://www.w3schools.com/angular/tryit.asp?filename=try_ng_ng-bind

以上是关于无法将范围变量绑定到角度js中的html元素的主要内容,如果未能解决你的问题,请参考以下文章

将变量从商店绑定到角度ngrx中的组件

范围问题中的角度绑定模型?

将多个输入绑定到可观察数组中的同一变量(Knockout.JS)

无法将文本绑定到 VueJS 模板中的 href 属性

渲染组件后,Vue.js将单击事件绑定到v-html中的锚元素[重复]

Knockout JS 如何将数据绑定到静态表单元素