隔离范围变量未定义 [英] Isolate scope variable is undefined
问题描述
出于某种原因，我无法访问我的分离范围变量指数在我的链接功能。我曾经尝试都 @ 和 = 来看看它的任何区别，这有没有影响，我也利用试过比指数以外的字（在情况下，它已经在由角或东西使用）配有相同的结果。错误信息：的ReferenceError：指数没有定义
指令：
VAR jobernizeDirectives = angular.module（'jobernizeDirectives'，[]）;jobernizeDirectives.directive（'viewLargeContent'，函数（）{
返回{
范围： {
指数：'=索引
}，
要求：'ngModel'，
链接：功能（范围，EL，ATTRS，ngModel）{ 的console.log（指数）; 功能openEditor（）{
的console.log（指数）; 变种main_container = angular.element（'。main_container'）;
VAR view_frame = angular.element（'视图帧。'）; 的console.log（ngModel）; main_container.append（'＆LT; DIV CLASS =调光器＆GT;＆LT; / DIV＆GT;'）;
main_container.append（ '＆LT; DIV CLASS =大内容+指数+'＆GT;'
+'＆LT; TextArea＆GT;' + ngModel $ viewValue +'＆LT; / textarea的＆GT;'
+'＆LT;按钮和GT;提交更改＆LT; /按钮＆GT;'
+'＆LT; / DIV＆GT;' ）; 变种二聚体= angular.element（'调光器。'）;
VAR content_container = angular.element（+指数大内容。'）; // content_container.css（{marginTop：（content_container.height（）/ - 2），宽度：view_frame.width（），marginLeft：（view_frame.width（）/ - 2）}）
content_container.css（{高度：（0.8 * main_container.height（）），宽：view_frame.width（），marginLeft：（view_frame.width（）/ - 2）}） content_container.find（'按钮'）。在（'点击'，功能（）{
VAR NEW_CONTENT = content_container.find（'文本区域'）得到（0）.value的。 ngModel $ setViewValue（NEW_CONTENT）。 content_container.hide（）;
dimmer.hide（）;
}）;
} // el.on（'点击'，openEditor）;
el.on（'点击'，openEditor）; }
}
}）;
HTML
＆LT; DIV数据-NG-控制器=resumesController＆GT; ＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =小12列＆GT;
＆LT; H2＆GT;您的简历和LT; / H＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =小12列＆GT;
＆LT;表＆gt;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
＆LT;第i个姓名和LT; /第i
＆LT;第i类和LT; /第i
＆LT;第i添加的日期＆LT; /第i
百分位＆gt;查看/编辑简历＆LT; /第i
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TBODY GT;
＆LT; TR数据-NG-重复=简历简历＆GT;
＆所述; TD＆GT; {{resume.name}}＆下; / TD＆GT;
＆所述; TD＆GT; {{resume.category}}＆下; / TD＆GT;
＆所述; TD＆GT; {{resume.date_added}}＆下; / TD＆GT;
＆LT; TD＆GT;＆LT;按钮指数=乐视图 - 大内容数据-NG-模式=resume.content＆gt;查看简历＆LT; /按钮＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT;表＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT; / DIV＆GT;
指数是你的范围对象的属性，让你访问它是这样的：
scope.index
这两个'@'或'='会的工作，不同的是，@将内插值，以及更新隔离的范围时，它的变化和'='是指角度应保持属性，同步分离范围。
如果这些变量有相同的名字，你可以使用语法糖
范围：{
指数：'@'
}，
下面是一个 JSBin 与code。
For some reason I am not able to access my isolate scope variable "index" in my link function. I have tried both @ and = to see if it made any difference and this had no effect, I also tried using a word other than index (in case it was already in use by angular or something) with the same result. Error msg: ReferenceError: index is not defined.
directive:
var jobernizeDirectives = angular.module('jobernizeDirectives', []);
jobernizeDirectives.directive('viewLargeContent', function() {
return {
scope: {
index: '=index'
},
require: 'ngModel',
link: function (scope, el, attrs, ngModel) {
console.log(index);
function openEditor() {
console.log(index);
var main_container = angular.element('.main_container');
var view_frame = angular.element('.view-frame');
console.log(ngModel);
main_container.append('<div class="dimmer"></div>');
main_container.append(
'<div class="large-content' + index + '">'
+ '<textarea>' + ngModel.$viewValue + '</textarea>'
+ '<button>Submit Changes</button>'
+ '</div>'
);
var dimmer = angular.element('.dimmer');
var content_container = angular.element('.large-content' + index);
// content_container.css({ marginTop: (content_container.height()/-2), width: view_frame.width(), marginLeft: (view_frame.width()/-2) })
content_container.css({ height: (0.8*main_container.height()), width: view_frame.width(), marginLeft: (view_frame.width()/-2) })
content_container.find('button').on('click', function() {
var new_content = content_container.find('textarea').get(0).value;
ngModel.$setViewValue(new_content);
content_container.hide();
dimmer.hide();
});
}
// el.on('click', openEditor);
el.on('click', openEditor);
}
}
});
html:
<div data-ng-controller="resumesController">
<div class="row">
<div class="small-12 columns">
<h2>Your Resumes</h2>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Date Added</th>
<th>View/Edit Resume</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="resume in resumes">
<td>{{ resume.name }}</td>
<td>{{ resume.category }}</td>
<td>{{ resume.date_added }}</td>
<td><button index="le" view-large-content data-ng-model="resume.content">View Resume</button></td>
</tr>
</tbody>
<table>
</div>
</div>
</div>
Index is an attribute of you scope object, so you access it like this:
scope.index
Both '@' or '=' will work, the difference is that '@' will interpolate the value and update the isolated scope when it changes and '=' means Angular should keep the attribute and the isolated scope in sync. If the variables have the same name you can use the syntactic sugar
scope: {
index: '@'
},
Here is a JSBin with your code.
这篇关于隔离范围变量未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
