- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我希望 ng-repeat 从字符串内的 ui-srefs 构建 href。常见问题解答存储在数据库中,文本中包含链接。
JSON
[
{
"question": "How do I find out about you?",
"answer": "Go here "<a ui-sref='root.aboutUs'>about us"</a> page."
}
]
Controller
(function() {
'use strict';
angular
.module('test.faqs')
.controller('Faqs', Faqs);
Faqs.$inject = ['faqService', 'exception', '$document', '$sce'];
/* @ngInject */
function Faqs(faqService, exception, $document, $sce) {
var vm = this;
vm.trustAsHtml = $sce.trustAsHtml;
faqService.getFaqs()
.then(function (response){
vm.allFaqs = response;
})
.catch(function (){
exception.catcher('Error retrieving faqs')(message);
});
}
})();
HTML
<div id="faq_{{$index}}" ng-repeat="faq in faqs.allFaqs track by $index">
<div>
<span ng-bind-html="faqs.trustAsHtml(faq.question)"></span>
</div>
<div>
<span ng-bind-html="faqs.trustAsHtml(faq.answer)"></span>
</div>
我正在寻找一种方法来处理来自 json feed 的 ui-srefs,以便链接正常工作。有办法做到这一点吗?
提前致谢。
已解决
指令
(function () {
'use strict';
angular
.module('test')
.directive('compileHtml', compileHtml);
/* @ngInject */
compileHtml.$inject = ['$compile', '$sce'];
function compileHtml($compile, $sce) {
return {
restrict: 'A',
replace: true,
link: function (scope, element, attrs) {
var html = attrs.compileHtml;
html = $sce.trustAsHtml(html);
element.html(html);
$compile(element.contents())(scope);
}
}
}
})();
HTML
<div id="faq_{{$index}}" ng-repeat="faq in faqs.allFaqs track by $index">
<div>
<span compile-html="{{faq.question}}"></span>
</div>
<div>
<span compile-html="{{faq.answer}}"></span>
</div>
</div>
感谢 goliney 为我指明了正确的方向!指令将字符串转换为 html,然后将其编译回使 ui-srefs 生效的范围。
最佳答案
您需要的是 $compile服务。
已更新PLUNKER
faqApp.controller('homeCtrl', function($scope, $sce, $compile) {
$scope.test = "hello there!";
$scope.allFaqs = [{
"question": "Where can I get info about you?",
"answer": $compile("<span>Go here: <a ui-sref='about'>about us</a><span>")($scope).html()
}];
$scope.trustAsHtml = $sce.trustAsHtml;
});
$compile
。请注意,html 必须具有单个根元素。$compile()
返回链接函数,然后可用于链接 $scope
。.html()
应用于链接的模板。但我建议为此制定一个指令。实际上,如果在某些时候您必须使用 DOM - 指令是一种不错的选择。你可能会发现这个SO answer有用。关于angularjs - 动态 ui-sref 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37923895/
我有这个模板 1
我使用 ng-repeat 设置了导航,效果非常好 {{link.Text}} 但是,我的导航项经常有子链接,这意味着父链接并不是真正的导航链接,它只是用于展开和查看子链接。但有时它是
HTML: Order + 我要添加class="active"在 . 每当点击 +这个,那个时候class="active"添加 .
我是 Angularjs 的新手,我很想创建一个具有多个 View 的表单(使用 ui-router)。每个 View 将包含要填写的表单的不同数据,因此当一个 View 已填写后,我不想只单击 an
我想呈现一个链接,例如: 所在州名myState和 key myKey是变量。 有没有办法做到这一点? 最佳答案 我发现自己处于同样的情况,我也无法完成,尝试使用 ng-click 移动您的代码,并
我在 Angular 应用程序中创建了一个自定义指令,其中包含几个 ui-sref 链接。我希望此链接根据当前状态或正在加载的模板进行更改: 我的目的是通过属性传递此信息,以便基于 page 变量生
我在 header.html 中有以下 Angular 代码
你能告诉我一种禁用提交按钮的方法吗,该按钮会通过以下方式更改为新状态: Submit 仅当表单有效时才应启用该按钮。 ng-disabled 与 ui-sref 不起作用: Submit ap
我正在寻找编写一个指令,允许单击外部元素来克隆其所包含元素之一的 ui-sref ,这样单击外部元素的行为与单击.cloned 元素 ... example example
我需要使用带有参数和查询参数的 ui-sref 动态构建指向 Angular 应用程序上另一条路线的链接。示例: {{comment.subject}} 这会构造一个看起来像这样的链接 www
我的 ui-router 状态提供程序中有以下状态: $urlRouterProvider.when('/parent', '/parent/child'); $stateProvider.state
嗨,我有 angular 的 google map ,我正在尝试使用按钮制作自定义 marker.content 以到达另一条路线。我正在像这样设置merkers this.setMarker = f
我尝试在新选项卡中打开 ui-sref,注意到我不想从 Controller 调用它。从 View 端怎么做? See all Blogs
下面是我的代码: 查看: Total: {{item[0].nbtickets}} 在 app.js 中: .state('app.usersingle',{
我在我的应用程序上使用 Angular 的 ui-router 来尝试路由到主视图的 subview 。 main 和 child 都有自己的关联 ID。目前我可以导航到 parent ,但我与 ch
我想将一些额外的数据从 ui-sref 传递到 Controller 中.我正在循环一个 json 对象并向 sref 添加数据: $stateProvider.state('main.imgDesc
我之前为此使用了 ng-route,它运行良好,但是使用 UI Router,链接不再可点击,或者至少大部分时间都不可点击。当它们是非常随机的时,它们不会显示我正在使用的 html 模板。 HTML:
我有一个 html 文件 User Profile Vehicle 和一个js文件 .state('sideMenu.settings
This question is might be similar to this but with different requirements 。由于我无法发表评论(需要 50 分),所以我正在复
我希望 ng-repeat 从字符串内的 ui-srefs 构建 href。常见问题解答存储在数据库中,文本中包含链接。 JSON [ { "question": "How do I fi
我是一名优秀的程序员,十分优秀!