分部视图无法在角度中正确编译
Partial View does not compile properly in angular
// Code goes here
var mymodule = angular.module('myapp', []);
mymodule.controller('mycontroller', function ($scope) {
});
mymodule.directive('pvTempUrl',
function ($http, $compile, $log, $templateCache) {
$log.info("Directive Called");
return {
restrict: 'A',
replace: true,
compile: function (telement, tattr, transclude) {
var templateloader = $http.get(tattr.pvTempUrl, { cache: $templateCache }).
success(function (data) {
$log.info("Success-" + data);
telement.html(data);
}).
error(function (data, status) {
$log.warn("Error occured - " + data + " status-" + status);
});
return function (scope, element, attr) {
templateloader.then(function () {
var compiledHtm = ($compile(telement.html())(scope)).html();
$log.info("compiled html-" + compiledHtm);
element.html(compiledHtm);
});
};
}
};
});
我有一个部分页面试图编译该页面,只是显示模板本身。
Plunkr 在这里可用
http://plnkr.co/edit/U85rmXhuQGKx5pkzUu99?p=preview
发现的问题我正在绑定 html 而不是编译的对象解决了如下问题
// Code goes here
var mymodule = angular.module('myapp', []);
mymodule.controller('mycontroller', function ($scope) {
});
mymodule.directive('pvTempUrl',
function ($http, $compile, $log, $templateCache) {
$log.info("Directive Called");
return {
restrict: 'A',
replace: true,
compile: function (telement, tattr, transclude) {
var templateloader = $http.get(tattr.pvTempUrl, { cache: $templateCache }).
success(function (data) {
$log.info("Success-" + data);
telement.html(data);
}).
error(function (data, status) {
$log.warn("Error occured - " + data + " status-" + status);
});
return function (scope, element, attr) {
templateloader.then(function () {
var compiledHtm = ($compile(telement.html())(scope));
$log.info("compiled html-" + compiledHtm);
//element.html(compiledHtm);
element.replaceWith(compiledHtm);
$log.info(element.html());
});
};
}
};
});
我以前从未见过有人尝试以这种方式加载模板。加载模板的正确 Angular 方法如下:
- 使用
ng-view
加载预定义的模板文件。 - 构建您自己的自定义指令。
我觉得你正在尝试做第二种方法。下面的代码示例是如何执行此操作的示例。
angular.module("myapp")
.directive('buttonsRadio', function() {
return {
restrict: 'E',
scope: false,
controller: function($scope){
//Any logic required for directive to work.
},
templateUrl: 'template.html'
};
})
在您的模板.html文件中,您将拥有要加载的模板。
有关如何构建自己的自定义指令元素的更多详细信息和示例,请参阅 Angular 文档中的编写指令(长版本(部分。
更新:已编辑以显示模板URL的示例。
相关文章:
- 如何使用javascript从主svg对象动态创建svg视图框
- 正在使用$location.path(.)路由ng视图
- angular.js没有'无法在PhoneGap中处理视图标记
- 如何包含特定于每个视图angularjs的javascript文件
- 通过在Dojo mobile ViewController.openExternalView中动态更改打开同一外部视图的
- Kendo:我该如何在树视图中创建一个递归的hieiarchy
- Ajax Live搜索发布到Laravel视图
- backbone.js无法渲染视图
- 根据某些条件在视图之间切换
- ng视图外的链接重定向到ng视图内的页面
- 如何在Jquery中发布后将值从视图返回到控制器
- 将日期时间作为 JSON 发送将无法在我的视图中正确显示
- 使用Scala Play Framework视图中的键检索映射值
- FF视图源|脚本高亮显示为红色
- 如何使bxslider仅在移动视图中处于活动状态
- 在 JavaScript 中编译/解释 Razor 视图
- ASP.NET MVC 和 JS 文件中的预编译视图
- 动态视图编译和渲染表达.js
- 分部视图无法在角度中正确编译
- Express.js视图引擎vs.手动编译