。$ $范围适用于注射用范围变量HTML不工作时 - AngularJs [英] $scope.$apply not working when injecting html with scope variables - AngularJs
本文介绍了。$ $范围适用于注射用范围变量HTML不工作时 - AngularJs的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有我试图注入我的网页模板
＆LT; DIV NG重复=周周级=main_container＆GT;
＆LT; DIV ID =周{{week.weekNumber}}的风格=高度：100％＆GT;
...
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
模板正确添加到我的主html页面然而，当我使用 $范围。$适用（）来重新分析我的HTML它改变任何东西。
我与破发点检查，范围包含 $ scope.weeks 阵列，它需要。
下面是我的控制器
VAR PlanningController =功能（$范围，$窗口，$ routeParams，$编译）{VAR认为这=;this.currentIndex = 1;
this.pageIndex ='0';
this.disallowRightScroll = FALSE;
旋转木马变种;
app.databaseManager.getUserDAO（）的getUser（
功能（用户）{
如果（用户）{
$ scope.user =用户;
$ scope.weeks = [];
如果（$ routeParams.weekIndex）{
$ scope.weekIndex = $ routeParams.weekIndex;
}
其他{
$ scope.weekIndex = PlanningManager.getWeekIndexFromTimeStamp（$ scope.user.date_start_planning）;
}
VAR dayIndex = PlanningManager.getDayIndexFromDate（新的Date（））;
app.planningManager.getWeeksJson（$ scope.user，[$ scope.weekIndex，$ scope.weekIndex + 1，$ scope.weekIndex + 2]，功能（jsonWeeks）{ $ scope.weeks = jsonWeeks;
VAR htmlWeekTemplate;
$获得（模块/规划/谐音/ weekTemplate.html功能（数据）{
htmlWeekTemplate =数据;
htmlWeekTemplate = $编译（htmlWeekTemplate）（$范围内）;
VAR幻灯片= [
htmlWeekTemplate
];
旋转木马=新SwipeView（'＃周滑块'，{
numberOfPages：slides.length，
hastyPageFlip：真
}）;
/ **
*加载所有的孩子进入轮转
* / //加载初始数据
为（变量I = 0; I＆下; 3;我++）{
VAR EL =使用document.createElement（'DIV'）;
el.innerHTML =幻灯片[I]
carousel.masterPages [I] .appendChild（EL）
}
$ $范围适用于（）。
}）; }）;
}其他{
$ scope.user =新用户（）;
} }
）;
/ * $（'。main_container'）。找到（'DIV'）。每个（函数（）{
// VAR innerDivId = $（本）.attr（'身份证'）;
carousel.masterPages [I] .appendChild（$（本））;
}）; * /
};
任何想法，我做错了吗？
更新
这是我所得到的，如果我尝试$编译（htmlWeekTemplate）（$范围内）;
[评论，jQuery的：2.0.3，构造：函数，初始化：功能选择：的toArray：函数...]
0：评论
基本URI：空
子节点：节点列表[0]
数据：ngRepeat：周周
则firstChild：空
jQuery203016117800935171545：未定义
lastChild：空
长度：25
的localName：空
的namespaceURI：空
nextElementSibling：div.main_container.ng范围的
nextSibling：div.main_container.ng范围的
节点名称：#COMMENT
节点类型：8
的nodeValue：ngRepeat：周周
ownerDocument：文件
parentElement：空
parentNode：文档片段
preFIX：空
previousElementSibling：空
previousSibling：空
的textContent：ngRepeat：周周
__proto__：评论
长度：1
__proto__：对象[0]
解决方案
您需要编译插入HTML，
使用 $编译（newHtmlInserted）（$范围内）;
I have a template that I'm trying to inject into my page
<div ng-repeat="week in weeks" class="main_container">
<div id="week{{week.weekNumber}}" style="height: 100%">
...
</div>
</div>
The template is correctly added to my main html page however when I use $scope.$apply() to reparse my html it change anything.
I have checked with break points and the scope contains the $scope.weeks array that it needs.
Here's my controller
var PlanningController = function ($scope, $window, $routeParams, $compile) {
var that = this;
this.currentIndex = 1;
this.pageIndex = '0';
this.disallowRightScroll = false;
var carousel;
app.databaseManager.getUserDAO().getUser(
function (user) {
if (user) {
$scope.user = user;
$scope.weeks = [];
if ($routeParams.weekIndex) {
$scope.weekIndex = $routeParams.weekIndex;
}
else {
$scope.weekIndex = PlanningManager.getWeekIndexFromTimeStamp($scope.user.date_start_planning);
}
var dayIndex = PlanningManager.getDayIndexFromDate(new Date());
app.planningManager.getWeeksJson($scope.user, [$scope.weekIndex, $scope.weekIndex + 1, $scope.weekIndex + 2], function (jsonWeeks) {
$scope.weeks = jsonWeeks;
var htmlWeekTemplate;
$.get("modules/planning/partials/weekTemplate.html", function (data) {
htmlWeekTemplate = data;
htmlWeekTemplate = $compile(htmlWeekTemplate)($scope);
var slides = [
htmlWeekTemplate
];
carousel = new SwipeView('#week-slider', {
numberOfPages: slides.length,
hastyPageFlip: true
});
/**
* LOAD ALL CHILDREN INTO CAROUSEL
*/
// Load initial data
for (var i = 0; i < 3; i++) {
var el = document.createElement('div');
el.innerHTML = slides[i];
carousel.masterPages[i].appendChild(el)
}
$scope.$apply();
});
});
} else {
$scope.user = new User();
}
}
);
/* $('.main_container').find('div').each(function(){
//var innerDivId = $(this).attr('id');
carousel.masterPages[i].appendChild($(this));
});*/
};
Any ideas as to what I'm doing wrong?
UPDATE
this is what I get if I try $compile(htmlWeekTemplate)($scope);
[comment, jquery: "2.0.3", constructor: function, init: function, selector: "", toArray: function…]
0: comment
baseURI: null
childNodes: NodeList[0]
data: " ngRepeat: week in weeks "
firstChild: null
jQuery203016117800935171545: undefined
lastChild: null
length: 25
localName: null
namespaceURI: null
nextElementSibling: div.main_container.ng-scope
nextSibling: div.main_container.ng-scope
nodeName: "#comment"
nodeType: 8
nodeValue: " ngRepeat: week in weeks "
ownerDocument: document
parentElement: null
parentNode: document-fragment
prefix: null
previousElementSibling: null
previousSibling: null
textContent: " ngRepeat: week in weeks "
__proto__: Comment
length: 1
__proto__: Object[0]
解决方案
You need to compile the HTML inserted,
use $compile(newHtmlInserted)($scope);
这篇关于。$ $范围适用于注射用范围变量HTML不工作时 - AngularJs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
