无法将范围变量绑定到角度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元素的主要内容,如果未能解决你的问题,请参考以下文章
将多个输入绑定到可观察数组中的同一变量(Knockout.JS)