是否可以在AngularJS控制器中创建HTML片段并在视图中显示此HTML？
这需要将不一致的JSON blob转换为嵌套的id : value对列表.因此,HTML是在控制器中创建的,我现在希望显示它.
我创建了一个模型属性,但是如果不打印HTML,则无法在视图中呈现它.
更新
似乎问题来自角度渲染创建的HTML作为引号内的字符串.将试图找到解决这个问题的方法.
示例控制器:
var SomeController = function () {
this.customHtml = '<ul><li>render me please</li></ul>';
}
示例视图:
<div ng:bind="customHtml"></div>
给:
<div>
"<ul><li>render me please</li></ul>"
</div>
有没有办法重复定义的次数而不是总是迭代一个数组？
例如,下面我希望列表项显示5次,假设$scope.number等于5,另外增加数量,以便每个列表项增量如1,2,3,4,5
期望的结果:
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
我刚开始使用angularJS并且正在努力找出适合我正在尝试的架构.我有一个单页应用程序,但URL始终保持不变 ; 我不希望用户能够导航到root之外的任何路由.在我的应用程序中,有一个主要div需要托管不同的视图.访问新视图时,我希望它接管主div中的显示.以这种方式加载的视图可以丢弃或隐藏在DOM中 - 我很想知道每个视图的工作原理.
我想出了一个粗略的工作示例,说明我正在尝试做什么. 请参阅此Plunk中的工作示例. 基本上我想动态地将HTML加载到DOM中,并让标准的angularJS控制器能够挂钩到新的HTML中.有没有更好/更简单的方法来做到这一点,而不是使用我在这里的自定义指令并使用$ compile()来连接到角度？也许有点像路由器,但是不需要URL有变化才能运行？
这是我到目前为止使用的特殊指令(取自另一个SO帖子):
// Stolen from: http://stackoverflow.com/questions/18157305/angularjs-compiling-dynamic-html-strings-from-database
myApp.directive('dynamic', function ($compile) {
return {
replace: true,
link: function (scope, ele, attrs) {
scope.$watch(attrs.dynamic, function(html) {
if (!html) {
return;
}
ele.html((typeof(html) === 'string') ? html : html.data);
$compile(ele.contents())(scope);
});
}
};
});
谢谢,
安迪
我在这里包含了一个Plunker:http://plnkr.co/edit/4vqV8toHo0vNjtfICtzI？p = preview
我正在尝试向DOM添加一个按钮,当单击时应该执行绑定到它的函数.在这种情况下,它应警告"测试".这是代码.
调节器
app.controller('MainCtrl', function($scope, $sce) {
$scope.trustedHtml = $sce.trustAsHtml('<button ng-click="testAlert()">Submit</button>');
$scope.testAlert = function () {
alert('testing')
};
});
HTML
<body ng-controller="MainCtrl">
<div ng-bind-html="trustedHtml"></div>
</body>
我有脚本块来加载局部视图上的小部件,但如果我直接放在部分html页面上,我会收到以下错误:
"无法在'Document'上执行'write':除非明确打开,否则无法从异步加载的外部脚本写入文档."
示例脚本块是:
> <script type="text/javascript" defer="defer"
> src="http://svenskfotboll.se/widget.aspx?scr=table&ftid=57108&b1=%232f3841&f1=%23ffffff&b2=%23acbfda&f2=%23000000&b3=%23ffffff&f3=%23000000&b4=%23ececec&bo=%23dfdfdf&s=1"></script>
我将有多个小部件,所以我想通过ng-repeat加载一些东西.请指教.
注意 我尝试显示静态方式为此我添加一个带有html/body标签的html页面并将其放在上面的脚本块然后通过iframe加载该页面然后它工作.但是在加载到iframe之前更新内容非常困难
我正在重写这个问题,因为我认为原文不太清楚.
基本上,我有一个'wrapper'指令,我试图动态地将属性添加到一个包装(transcluded)元素.我可以让它工作,但Angular似乎并没有意识到添加后的新属性.
如果我使用,$compile那么Angular会识别它们 - 但是以双重编译被转换的内容为代价,在这种情况下它options会使select标记中的数量加倍.
这里是一个plunker什么我试图能证明(有评论),下同代码如下对于那些谁可以查看代码,并暗示答案只是看:(注意-我的最终目的是检查自定义指令valid-form-group的required属性,如果发现将其应用于包含的select标记)
HTML
<body ng-controller="MainCtrl">
<form name="validationForm" novalidate>
<valid-form-group class="form-group" ng-class="{'has-error': validationForm.validInfo.$error.required}" required>
<select ng-model="data.option" ng-options="option.id as option.message for option in selectOptions" name="validInfo" id="validInfo">
<option value="">-- Select a Question --</option>
</select>
</valid-form-group>
</form>
</body>
JS
var app = angular.module('plunker', [])
.controller('MainCtrl', function($scope) {
$scope.selectOptions = [
{id: 1, message: 'First option'},
{id: 2, message: 'Second option'},
{id: 3, message: 'Third option'}
];
}) …CONTEXT
我需要在我的AngularJS(v1.4)应用程序中加载一些从后端获取的HTML并将其(html)插入到我的部分(已加载)中.部分已经加载了一些HTML(并且功能完全正常).现在我可以加载HTML并使用此处发布的指令编译它(从数据库编译动态HTML字符串).见下面的代码.
问题
但是......当部分HTML已经加载(部分加载和功能)然后我从后端获得另一个HTML内容,并且该指令正在编译新的内容时,整个文档(DOM)被"冻结".我无法输入输入或点击按钮,包括我之前加载的HTML中的按钮.
题
我如何加载HTML内容,$compile它以"后台"或任何其他方式加载,以便我继续使用其余的(已经正常运行的)HTML？
对我来说,必要的是,到达的新html内容会被编译,因为它包含角度验证等等,需要编译并进入"角度世界"(在角度摘要周期内等等).
这是我用来编译html的指令
(function () {
var dynamic = function($compile) {
return {
restrict: 'A',
replace: true,
link: function (scope, ele, attrs) {
scope.$watch(attrs.dynamic, function(html) {
if (html) {
ele.html(html);
$compile(ele.contents())(scope);
}
});
}
};
};
dynamic.$inject = ['$compile'];
angular.module('app')
.directive('dynamic', dynamic);
}());
在控制器中,我有类似的东西
// this will be filled with asynchronous calls were I get the HTMLs from a service
// in order …我想插入包含 ng-bind 和 ng-click 指令的动态 html 元素。我想在里面插入新的 html 元素
html 看起来像这样
<body data-ng-controller="controller">
<div id="toolbox">
<label>Page Width</label>
<input type="text" data-ng-model="pageWidth" />
<input type="button" value="H1" data-ng-click="createH1()" />
</div>
<div id="editor">
<div data-ng-style="{width:pageWidth + 'px'}" data-ng-page>
</div>
</div>
</body>
控制器 >
app.controller('controller', ['$scope', function ($scope) {
$scope.createH1 = function () {
document.getElementById("page").innerHTML = document.getElementById("page").innerHTML + ("<div class='h1' data-ng-h1 draggable></div>");
};
}]);
上面的控制器正在插入 html 元素，但新 html 元素的指令不起作用。
然而我开始知道，除非我们 $compile template/html ，否则它们将无法工作。
如果我使用 app.directive( ngPage, ..) 添加动态 html，它会在应用程序启动时插入。但我只想插入按钮 ng-click。
我是 Angular JS 的新手，有点困惑，请帮我解决这个问题。提前致谢。