AngularJS href没有获得动态值(AngularJS href is not getting dynamic value)

AngularJS href没有获得动态值(AngularJS href is not getting dynamic value)

javascript代码：

cable.register.controller('VideoMonitorCtrl', ['$scope', '$sce','ENV', '$http', function ($scope, $sce, ENV, $http) { console.log('Begin in video monitor controller'); var keepGoing =true; var url = '/ps/features/'; var exists = false; $scope.getVideoService = function () { console.log("url"+$scope.hurl) $http.get(url,{headers: {'contentType': 'application/json; charset=UTF-8'}}).success( function(response) { if(response!='') { angular.forEach(response.features, function(feature){ console.log("in for each"); console.log(counter++) if(keepGoing) { if(feature.name.trim() === "odl-video-monitor" && feature.installed.trim() ==='x') { console.log('in active again'); $scope.color='#FFFFFF'; $scope.msg='Quality Network'; $scope.hurl='index.html#/cable/videomonitor'; exists=true; keepGoing = false; } } }); if(!exists) { $scope.color='#BDBDBD'; $scope.msg='Video Quality Network is under maintenance'; } } else { $scope.color='#BDBDBD'; $scope.msg='Video Quality Network is under maintenance'; } }).error(function (response) { $scope.color='#BDBDBD'; $scope.msg='Video Quality Network is under maintenance'; }); }; } ]);

HTML代码：

<a ng-href='{{hurl}}' ng-controller="VideoMonitorCtrl" ng-init="getVideoService()" id="hlink" style="text-decoration:none;"> <div class="box" style="background-color:{{color}};"> <div style="margin-top:15px;text-align:left;padding-left:23px;"> <span style="font-size:24px !important;font-family:Times New Roman, serif;color:#7B7B7B;" class="Large">{{msg}} {{hurl}} </span> </div> </div> </a>

输出：

{{hurl}} =>正在div中打印值。

<a href={{hurl}} =>此处没有值，并且未启用链接。

任何原因？ 我能够看到div中的投掷内容，但不能看到href？

如果我在href中写入硬编码值，它是否有效但不是动态的？

javascript code:

cable.register.controller('VideoMonitorCtrl', ['$scope', '$sce','ENV', '$http', function ($scope, $sce, ENV, $http) { console.log('Begin in video monitor controller'); var keepGoing =true; var url = '/ps/features/'; var exists = false; $scope.getVideoService = function () { console.log("url"+$scope.hurl) $http.get(url,{headers: {'contentType': 'application/json; charset=UTF-8'}}).success( function(response) { if(response!='') { angular.forEach(response.features, function(feature){ console.log("in for each"); console.log(counter++) if(keepGoing) { if(feature.name.trim() === "odl-video-monitor" && feature.installed.trim() ==='x') { console.log('in active again'); $scope.color='#FFFFFF'; $scope.msg='Quality Network'; $scope.hurl='index.html#/cable/videomonitor'; exists=true; keepGoing = false; } } }); if(!exists) { $scope.color='#BDBDBD'; $scope.msg='Video Quality Network is under maintenance'; } } else { $scope.color='#BDBDBD'; $scope.msg='Video Quality Network is under maintenance'; } }).error(function (response) { $scope.color='#BDBDBD'; $scope.msg='Video Quality Network is under maintenance'; }); }; } ]);

HTML code:

<a ng-href='{{hurl}}' ng-controller="VideoMonitorCtrl" ng-init="getVideoService()" id="hlink" style="text-decoration:none;"> <div class="box" style="background-color:{{color}};"> <div style="margin-top:15px;text-align:left;padding-left:23px;"> <span style="font-size:24px !important;font-family:Times New Roman, serif;color:#7B7B7B;" class="Large">{{msg}} {{hurl}} </span> </div> </div> </a>

Output:

{{hurl}} => is printing the value in the div.

<a href={{hurl}} => there is not value in hurl here and link is not enabled.

Any reason? i am able to see the hurl content in the div but not in href?

If i write hardcoded value in href it is working but not dynamic?

最满意答案

将整个<a>元素包装在另一个元素中并将控制器放在那里，VideoMonitorCtrl的范围不包括<a>标签本身。

<div ng-controller="VideoMonitorCtrl" ng-init="getVideoService()"> <a ng-href='{{hurl}}' id="hlink" style="text-decoration:none;"> <div class="box" style="background-color:{{color}};"> <div style="margin-top:15px;text-align:left;padding-left:23px;"> <span style="font-size:24px !important;font-family:Times New Roman, serif;color:#7B7B7B;" class="Large">{{msg}} {{hurl}} </span> </div> </div> </a> </div>

Wrap the whole <a> element in another element and put the controller there, the scope of your VideoMonitorCtrl does not cover the <a> tag itself.

<div ng-controller="VideoMonitorCtrl" ng-init="getVideoService()"> <a ng-href='{{hurl}}' id="hlink" style="text-decoration:none;"> <div class="box" style="background-color:{{color}};"> <div style="margin-top:15px;text-align:left;padding-left:23px;"> <span style="font-size:24px !important;font-family:Times New Roman, serif;color:#7B7B7B;" class="Large">{{msg}} {{hurl}} </span> </div> </div> </a> </div>AngularJS href没有获得动态值(AngularJS href is not getting dynamic value)

javascript代码：

cable.register.controller('VideoMonitorCtrl', ['$scope', '$sce','ENV', '$http', function ($scope, $sce, ENV, $http) { console.log('Begin in video monitor controller'); var keepGoing =true; var url = '/ps/features/'; var exists = false; $scope.getVideoService = function () { console.log("url"+$scope.hurl) $http.get(url,{headers: {'contentType': 'application/json; charset=UTF-8'}}).success( function(response) { if(response!='') { angular.forEach(response.features, function(feature){ console.log("in for each"); console.log(counter++) if(keepGoing) { if(feature.name.trim() === "odl-video-monitor" && feature.installed.trim() ==='x') { console.log('in active again'); $scope.color='#FFFFFF'; $scope.msg='Quality Network'; $scope.hurl='index.html#/cable/videomonitor'; exists=true; keepGoing = false; } } }); if(!exists) { $scope.color='#BDBDBD'; $scope.msg='Video Quality Network is under maintenance'; } } else { $scope.color='#BDBDBD'; $scope.msg='Video Quality Network is under maintenance'; } }).error(function (response) { $scope.color='#BDBDBD'; $scope.msg='Video Quality Network is under maintenance'; }); }; } ]);

HTML代码：

<a ng-href='{{hurl}}' ng-controller="VideoMonitorCtrl" ng-init="getVideoService()" id="hlink" style="text-decoration:none;"> <div class="box" style="background-color:{{color}};"> <div style="margin-top:15px;text-align:left;padding-left:23px;"> <span style="font-size:24px !important;font-family:Times New Roman, serif;color:#7B7B7B;" class="Large">{{msg}} {{hurl}} </span> </div> </div> </a>

输出：

{{hurl}} =>正在div中打印值。

<a href={{hurl}} =>此处没有值，并且未启用链接。

任何原因？ 我能够看到div中的投掷内容，但不能看到href？

如果我在href中写入硬编码值，它是否有效但不是动态的？

javascript code:

cable.register.controller('VideoMonitorCtrl', ['$scope', '$sce','ENV', '$http', function ($scope, $sce, ENV, $http) { console.log('Begin in video monitor controller'); var keepGoing =true; var url = '/ps/features/'; var exists = false; $scope.getVideoService = function () { console.log("url"+$scope.hurl) $http.get(url,{headers: {'contentType': 'application/json; charset=UTF-8'}}).success( function(response) { if(response!='') { angular.forEach(response.features, function(feature){ console.log("in for each"); console.log(counter++) if(keepGoing) { if(feature.name.trim() === "odl-video-monitor" && feature.installed.trim() ==='x') { console.log('in active again'); $scope.color='#FFFFFF'; $scope.msg='Quality Network'; $scope.hurl='index.html#/cable/videomonitor'; exists=true; keepGoing = false; } } }); if(!exists) { $scope.color='#BDBDBD'; $scope.msg='Video Quality Network is under maintenance'; } } else { $scope.color='#BDBDBD'; $scope.msg='Video Quality Network is under maintenance'; } }).error(function (response) { $scope.color='#BDBDBD'; $scope.msg='Video Quality Network is under maintenance'; }); }; } ]);

HTML code:

<a ng-href='{{hurl}}' ng-controller="VideoMonitorCtrl" ng-init="getVideoService()" id="hlink" style="text-decoration:none;"> <div class="box" style="background-color:{{color}};"> <div style="margin-top:15px;text-align:left;padding-left:23px;"> <span style="font-size:24px !important;font-family:Times New Roman, serif;color:#7B7B7B;" class="Large">{{msg}} {{hurl}} </span> </div> </div> </a>

Output:

{{hurl}} => is printing the value in the div.

<a href={{hurl}} => there is not value in hurl here and link is not enabled.

Any reason? i am able to see the hurl content in the div but not in href?

If i write hardcoded value in href it is working but not dynamic?

最满意答案

将整个<a>元素包装在另一个元素中并将控制器放在那里，VideoMonitorCtrl的范围不包括<a>标签本身。

<div ng-controller="VideoMonitorCtrl" ng-init="getVideoService()"> <a ng-href='{{hurl}}' id="hlink" style="text-decoration:none;"> <div class="box" style="background-color:{{color}};"> <div style="margin-top:15px;text-align:left;padding-left:23px;"> <span style="font-size:24px !important;font-family:Times New Roman, serif;color:#7B7B7B;" class="Large">{{msg}} {{hurl}} </span> </div> </div> </a> </div>

Wrap the whole <a> element in another element and put the controller there, the scope of your VideoMonitorCtrl does not cover the <a> tag itself.

<div ng-controller="VideoMonitorCtrl" ng-init="getVideoService()"> <a ng-href='{{hurl}}' id="hlink" style="text-decoration:none;"> <div class="box" style="background-color:{{color}};"> <div style="margin-top:15px;text-align:left;padding-left:23px;"> <span style="font-size:24px !important;font-family:Times New Roman, serif;color:#7B7B7B;" class="Large">{{msg}} {{hurl}} </span> </div> </div> </a> </div>