在AngularJS的1.3和2版中创建指令作用域的方式是一样的
Is the way of creating a directive scope the same in versions 1.3 and 2 of AngularJS?
我有以下指令,我的应用程序正在使用。我的印象是,我的应用程序在AngularJS 1.3下工作得很好,但经过很多变化,包括移动到最新版本,删除jQuery,以及使用controller as
,然后现在这个指令给我错误:
app.directive('pagedownAdmin', function ($compile, $timeout) {
var nextId = 0;
var converter = Markdown.getSanitizingConverter();
converter.hooks.chain("preBlockGamut", function (text, rbg) {
return text.replace(/^ {0,3}""" *'n((?:.*?'n)+?) {0,3}""" *$/gm, function (whole, inner) {
return "<blockquote>" + rbg(inner) + "</blockquote>'n";
});
});
return {
require: 'ngModel',
replace: true,
scope: {
modal: '=modal'
},
template: '<div class="pagedown-bootstrap-editor"></div>',
link: function (scope, iElement, attrs, ngModel) {
var editorUniqueId;
if (attrs.id == null) {
editorUniqueId = nextId++;
} else {
editorUniqueId = attrs.id;
}
var newElement = $compile(
'<div>' +
'<div class="wmd-panel">' +
'<div data-ng-hide="modal.wmdPreview == true" id="wmd-button-bar-' + editorUniqueId + '"></div>' +
'<textarea data-ng-hide="modal.wmdPreview == true" class="wmd-input" id="wmd-input-' + editorUniqueId + '">' +
'</textarea>' +
'</div>' +
'<div data-ng-show="modal.wmdPreview == true" id="wmd-preview-' + editorUniqueId + '" class="pagedownPreview wmd-panel wmd-preview">test div</div>' +
'</div>')(scope);
iElement.html(newElement);
var help = function () {
alert("There is no help");
}
var editor = new Markdown.Editor(converter, "-" + editorUniqueId, {
handler: help
});
var $wmdInput = iElement.find('#wmd-input-' + editorUniqueId);
var init = false;
editor.hooks.chain("onPreviewRefresh", function () {
var val = $wmdInput.val();
if (init && val !== ngModel.$modelValue) {
$timeout(function () {
scope.$apply(function () {
ngModel.$setViewValue(val);
ngModel.$render();
});
});
}
});
ngModel.$formatters.push(function (value) {
init = true;
$wmdInput.val(value);
// editor.refreshPreview();
return value;
});
editor.run();
}
}
});
谁能给我解释一下下面的人在做什么?
scope: {
modal: '=modal'
},
和
)(scope);
下面是我如何调用这个指令:
<textarea id="modal-data-text"
class="pagedown-admin wmd-preview-46"
data-modal="modal"
data-pagedown-admin
ng-model="home.modal.data.text"
ng-required="true"></textarea>
如果有人能看到任何可能不工作在2然后我将非常感激一些帮助。特别是,下面的代码似乎返回null:
var $wmdInput = iElement.find('#wmd-input-' + editorUniqueId);
您放弃了jQuery,因此您的代码现在依赖于jQLite。使用jqLite时,元素对象的函数支持的功能较少。请参阅文档中的完整细节:https://docs.angularjs.org/api/ng/function/angular.element
var $wmdInput = iElement.find('#wmd-input-' + editorUniqueId);
在jqLite下,find函数只支持通过标签名搜索,id将不起作用。你可以使用以下技巧从(AngularJS: How to。find using jqLite?)
// find('#id')
angular.element(document.querySelector('#wmd-input-' + editorUniqueId))
$compile是一个编译模板并将其链接到作用域的服务。https://docs.angularjs.org/api/ng/service/编译美元
scope: {
modal: '=modal'
}
允许你为指令定义一个独立的作用域,并与声明该指令的作用域绑定。'='用于双向数据绑定。字符串和函数的其他选项是'@和&'。https://docs.angularjs.org/guide/directive
相关文章:
- 为什么这在IE中的工作方式与在Firefox中不同
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 在localhost Dev Box上测试JSONP请求的最佳方式
- 使用javascript存储变量的最安全方式
- 以可优化的方式使用requirejs加载模板
- 在Highcharts中,我们可以通过任何方式在渲染图表之前获得plotWidth和plotHeight
- 任何方式使AJAX调用Gmail API,而无需通过JS库
- 为react组件传递道具的最佳方式
- 让Webpack管理Quirky AMD定义的最佳方式
- 在承诺链中处理早期回报的最佳方式
- 使用向下箭头键(与tab键一样)聚焦下一个输入
- jQuery的工作方式不一样
- Jquery/javascript方式发送50个表单,就像发送1个表单一样
- 根据连续的方式对数组进行排序,就像先模拟最短的作业一样
- 在AngularJS的1.3和2版中创建指令作用域的方式是一样的
- 函数每次重新加载的工作方式都不一样
- 拖动的最佳方式是什么?Drop with js,就像谷歌地图中的地图一样
- 以编程方式选择与textarea元素中的字符串匹配的文本(就像用鼠标一样)
- 是“;静音”;以及“;体积=0.0”;还是一样?事件侦听器对它们的处理方式不同