请帮我解决这个问题。以下是代码。
HTML：
<div ng-controller="ctrl"><a href="{{ link }}">click here</a></div>
JS：
app.controller('ctrl', function($scope) {
$scope.true_link = "http://google.com";
$scope.link = "{{ true_link }}";
});
结果：
<div ng-controller="ctrl"><a href="{{ true_link }}">click here</a></div>
期望：
<div ng-controller="ctrl"><a href="http://google.com">click here</a></div>
在HTML中将{{ link }}替换为{{ true_link }}将解决此问题。但我必须用这种方式。如何再次评估$ scope.link内容中的表达式？请帮我。感谢。
看起来像facebook，我有两个墙页：用户页面和Actor页面。它们具有相同的模板结构和过程（追加，删除元素等...）之后的业务功能，如changeAvatar（），changeCover（），post（）等...所以我创建'主页'的指令：
app.directive('homepage', function() {
return {
restrict: 'A',
templateUrl: 'homepage.html',
controller: 'homepageCtrl'
};
});
app.controller('homepageCtrl', function($scope) {
$scope.changeAvatar() = ...;
$scope.post() = ...;
});
和两个扩展控制器：
app.controller('userCtrl', function($scope, $http) {
$http.({...}).success((data){ $scope.username = data.username })
$scope.menu = [
{
title: "foo-user"
link: "/u/{{ username }}/foo-user"
}
{
title: "bar-user"
link: "/u/{{ username }}/bar-user"
}
]
});
app.controller('actorCtrl', function($scope) {
$http.({...}).success((data){ $scope.actorname = data.actorname })
$scope.menu = [
{
title: "foo-actor"
link: "/u/{{ actorname }}/foo-actor"
}
{
title: "bar-actor"
link: "/u/{{ actorname }}/bar-actor"
}
]
});
<section>
<header>
<ul class="menu">
<li ng-repeat="_menu in menu">
<a href="{{ _menu.link }}">
{{ _menu.title }}
</a>
</li>
</ul>
</header>
<main>
content...
</main>
</section>
<div homepage ng-controller="userCtrl"></div>
<div homepage ng-controller="actorCtrl"></div>
两页菜单具有相同的HTML结构和＆amp;效果，但项目不同。我想在扩展控制器（userCtrl，actorCtrl）中定义菜单项并通过ng-repeat打印它们。问题是评估$ scope.menu.link内容。
我找到了解决方案：使用$ scope。$ eval（https://docs.angularjs.org/guide/expression）。
在userCtrl中，$scope.menu[i].link是动态内容，因为包含username - 来自ajax调用。我可以使用foreach更新$ http.success（）中的$ scope.menu [i] .link。但我认为使用$ scope。$ eval可以帮助我在任何我想要的地方自动更新。
所以，代码是：
app.controller('userCtrl', function($scope, $http) {
$http.({...}).success((data){ $scope.username = data.username })
$scope.menu = [
{
title: "foo-user"
link: "'/u/' + username + '/foo-user'"
show: 'true'
}
{
title: "bar-user"
link: "'/u/' + {{ username }} + '/bar-user'"
show: 'username == "lorem"'
}
]
});
<section>
<header>
<ul class="menu">
<li
ng-repeat="_menu in menu"
>
<a
ng-href="{{$parent.$eval(_menu.link)}}"
ng-show="$parent.$eval(_menu.show)"
>
{{_menu.title}}
</a>
</li>
</ul>
</header>
<main>
content...
</main>
</section>
答案 0 :(得分：2)
创建一个指令，并使用$ eval来解析表达式：
app.directive('a', function (){
return {
restrict : 'E',
link: function(scope, element, attr){
element.attr('href',scope.$eval(attr.href));
}
}
});
答案 1 :(得分：1)
app.controller('ctrl', function($scope) {
$scope.true_link = "http://google.com";
$scope.link = $scope.true_link; // you need a copy of `$scope.true_link` here
});
<div ng-controller="ctrl"><a ng-href="link">click here</a></div>
答案 2 :(得分：0)
$scope.link = "{{ true_link }}";这只是一个字符串，没有别的，所以它会这样呈现。
不要被大括号弄糊涂。
使用$compile，eval等可以使事情复杂化......或者您可以简单地将true_link值分配给链接变量。
更新
你的ng-repeat指令有问题。这个：
<li ng-repeat="_menu in menu">
<a href="{{ menu.link }}">{{ menu.title }}</a>
</li>
应该是这个（注意_menu）：
<li ng-repeat="_menu in menu">
<a href="{{ _menu.link }}">{{ _menu.title }}</a>
</li>
此外，您无需在控制器中使用模板，所以：
$scope.menu = [
{
title: "foo-user"
link: "/u/{{ username }}/foo-user"
}
{
title: "bar-user"
link: "/u/{{ username }}/bar-user"
}
]
可以是这样的：
$scope.menu = [
{
title: "foo-user"
link: "/u/" + $scope.username + "/foo-user"
}
{
title: "bar-user"
link: "/u/" + $scope.username + "/bar-user"
}
]
答案 3 :(得分：0)
为什么要使用{{link}}代替{{true_link}}？你遇到了什么问题＆＃34;你必须用这种方式＆＃34;？如果你能详细解释一下，我们是否可以找到更好的解决方案。