在Selectize.js项中呈现角指令
我正在使用角度选择在我的角度项目中使用Selectize.js。
要在Selectize.js选择器中使用自定义项，我使用Selectize.js的渲染选项：
render: {
item: function(item, escape) {
var avatar = '<div>' +
'<span avatars="\'' + escape(item._id) +'\'" class="avatars">' +
'</span>' +
escape(item.nick) +
'</div>';
var compiledAvatar = $compile(avatar)($rootScope);
$timeout();
return compiledAvatar.html();
},其中，avatars是一个自定义指令，具有不同步的行为。
问题是，render.item函数需要一个HTML作为输出，但是
- 无法像
$compile方法所期望的那样以同步方式返回呈现或“render.itemed”的HTML。 - 我不知道在项目元素已经添加到DOM之后如何呈现它们。
注意，虽然调用了$compile，但由于$compile的异步性质，返回的字符串不是预期的编译结果，而是编译前的字符串。
回答 2
Stack Overflow用户
发布于 2016-07-28 15:04:55
这个答案是基于@gregori的有帮助的答案，有以下不同之处：
- 考虑到Selectize.js的呈现缓存。Selectize.js的标准行为是以呈现函数返回的方式缓存项，而不是对它们进行修改。在添加和删除某些元素之后，如果我们不准确地更新呈现缓存，则将显示缓存而不是修改的版本。
- 使用随机id标识要从DOM中选择要操作的元素。
- 使用观察者知道编译何时完成
首先，我们定义了一个修改selectize.js呈现缓存的方法：
scope.selectorCacheUpdate = function(key, value, type){
var cached = selectize.renderCache[type][key];
// update cached element
var newValue = angular.element(cached).html(value);
selectize.renderCache[type][key] = newValue[0].outerHTML;
return newValue.html();
};然后，呈现函数定义如下：
function renderAvatar(item, escape, type){
// Random id used to identify the element
var randomId = Math.floor(Math.random() * 0x10000000).toString(16);
var avatar =
'<div id="' + randomId + '">' +
'<span customAvatarTemplate ...></span>' +
...
'</div>';
var compiled = $compile(avatar)($rootScope);
// watcher to see when the element has been compiled
var destroyWatch = $rootScope.$watch(
function (){
return compiled[0].outerHTML;
},
function (newValue, oldValue){
if(newValue !== oldValue){
var elem = angular.element(document.getElementById(randomId));
var rendered = elem.scope().selectorCacheUpdate(item._id, compiled.html(), type);
// Update DOM element
elem.html(rendered);
destroyWatch();
}
}
);
});
return avatar;}
注意:呈现缓存的关键是选择项的valueField，在本例中是_id
最后，我们将此函数添加为选择化配置对象中的选择化呈现函数：
config = {
...
render: {
item: function(i,e){
return renderAvatar(i, e, 'item');
},
option: function(i,e){
return renderAvatar(i, e, 'option');
}
},
...
}有关更多细节，请参见如何将此解决方案添加到激发此问题的应用程序中：https://github.com/P2Pvalue/teem/commit/968a437e58c5f1e70e80cc6aa77f5aefd76ba8e3。
Stack Overflow用户
发布于 2016-07-06 01:35:09
一个想法是使用DOM操作，这不是最推荐的角度方式，但我得到了研究这个柱塞。和一个第二，使用自定义指令和随机数据来模拟编译后的化身。
为了模拟异步调用，我使用ngResource。我的呈现函数返回一个带有特殊类标记compiledavatar的字符串compiledavatar。在一两秒钟内，您将看到临时阿凡达，当您选择一个元素。当ngResource调用完成后，我使用类compiledavatar查找元素，然后用我下载的内容替换html。以下是完整的代码：
var app = angular.module('plunker', ['selectize', 'ngResource']);
app.controller('MainCtrl', function($scope, $resource, $document) {
var vm = this;
vm.name = 'World';
vm.$resource = $resource;
vm.myModel = 1;
vm.$document = $document;
vm.myOptions = [{
id: 1,
title: 'Spectrometer'
}, {
id: 2,
title: 'Star Chart'
}, {
id: 3,
title: 'Laser Pointer'
}];
vm.myConfig = {
create: true,
valueField: 'id',
labelField: 'title',
delimiter: '|',
placeholder: 'Pick something',
onInitialize: function(selectize) {
// receives the selectize object as an argument
},
render: {
item: function(item, escape) {
var label = item.title;
var caption = item.id;
var Stub = vm.$resource('mydata', {});
// This simulates your asynchronous call
Stub.get().$promise.then(function(s) {
var result = document.getElementsByClassName("compiledavatar")
angular.element(result).html(s.compiledAvatar);
// Once the work is done, remove the class so next time this element wont be changed
// Remove class
var elems = document.querySelectorAll(".compiledavatar");
[].forEach.call(elems, function(el) {
el.className = el.className.replace(/compiledavatar/, "");
});
});
return "<div class='compiledavatar'>Temporary Avatar</div>"
}
},
// maxItems: 1
};
});为了模拟JSON，我刚刚在柱塞mydata中创建了一个文件
{
"compiledAvatar": "<div><span style='display: block; color: black; font-size: 14px;'>an avatar</span></div>"
}当然，编译后的函数应该会在每次调用时返回不同的内容。我，它给了我同样的证明原则。
此外，如果您的动态代码是一个Agular指令，下面是一个带有自定义指令和随机数据的二次柱塞，这样您就可以更好地看到解决方案：
数据包括一个自定义指令my-customer。
[{
"compiledAvatar": "<div><span style='display: block; color: black; font-size: 14px;'>an avatar #1 <my-customer></my-customer></span></div>"
},
{
"compiledAvatar": "<div><span style='display: block; color: black; font-size: 14px;'>an avatar #2 <my-customer></my-customer></span></div>"
},
(...)该指令的定义是：
app.directive('myCustomer', function() {
return {
template: '<div>and a custom directive</div>'
};
});应用程序的主要区别是在替换$compile时必须添加An avatar #(number) and a custom directive，文本应该显示An avatar #(number) and a custom directive。我得到一个json值数组，并使用一个简单的随机值来选择一个值。一旦HTML被替换，我就移除类，所以下一次只会更改最后添加的元素。
Stub.query().$promise.then(function(s) {
var index = Math.floor(Math.random() * 10);
var result = document.getElementsByClassName("compiledavatar")
angular.element(result).html($compile(s[index].compiledAvatar)($scope));
// Remove class
var elems = document.querySelectorAll(".compiledavatar");
[].forEach.call(elems, function(el) {
el.className = el.className.replace(/compiledavatar/, "");
});
});另外，我看了选择库，你不能回承诺.就像对render返回的值进行html.replace一样。这就是为什么我选择了带有类的临时字符串的路由，以便稍后检索和更新。如果这有帮助的话请告诉我。
https://stackoverflow.com/questions/38106412
复制相似问题
腾讯云开发者
