隔离范围变量未定义 [英] Isolate scope variable is undefined
问题描述
由于某种原因,我无法在链接函数中访问隔离范围变量index".我已经尝试了 @
和 =
以查看它是否有任何区别,但这没有效果,我还尝试使用索引以外的词(以防它已经在使用 angular 或其他东西)具有相同的结果.错误消息:ReferenceError:索引未定义
.
指令:
var jobernizeDirectives = angular.module('jobernizeDirectives', []);jobernizeDirectives.directive('viewLargeContent', function() {返回 {范围: {索引:'=索引'},要求:'ngModel',链接:函数(范围、el、attrs、ngModel){控制台日志(索引);函数 openEditor() {控制台日志(索引);var main_container = angular.element('.main_container');var view_frame = angular.element('.view-frame');控制台日志(ngModel);main_container.append('<div class="dimmer"></div>');main_container.append(''+ '<文本区域>'+ ngModel.$viewValue + '</textarea>'+ '<按钮>提交更改按钮>'+ '</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('点击', 打开编辑器);}}});html:
<div class="row"><div class="small-12 列"><h2>你的简历</h2>
<div class="row"><div class="small-12 列"><表格><头><tr><th>姓名</th><th>类别</th>
添加日期</th><th>查看/编辑简历</th></tr></thead> <tr data-ng-repeat="简历中的简历"><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">查看简历</button></td></tr></tbody><表格> 解决方案 Index 是作用域对象的一个属性,因此您可以像这样访问它:
scope.index
'@' 或 '=' 都可以工作,区别在于 '@' 将插入值并在它更改时更新隔离范围,而 '=' 意味着 Angular 应该保持属性和隔离范围同步.如果变量具有相同的名称,则可以使用语法糖
范围:{指数: '@'},
这是带有您的代码的 JSBin.
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屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆