当属性更改值指令不运行链接功能 [英] Directive does not run link function when attribute changes value
问题描述
我创建了一个指令，用于封装qTip2库到我的角度应用程序（如
当我改变从CV-提示=权利CV-提示属性的另一个指令=左的价值问题发生时，提示指令链接功能不重新运行时的数值变化，从而造成不会更新与正确的配置qTip。
qtip指令如下：
mainApp.directive（'cvTooltip'，函数（）{
VAR optionDictionary = {
'对'： {
位置：{
我：中间偏左，
位置：右心
}，
风格：{
小费： {
角落：中间偏左，
高度：10
}
}
}，
'剩下'： {
位置：{
我：中间偏右，
位置：左心
}，
风格：{
小费： {
角落：右中心，
高度：10
}
}
}
};
返回{
限制：'A'，
范围： {
positionType：'= cvTooltip
}，
链接：功能（范围，元素，ATTRS）{ VAR的选择= {
风格：{
小费： {
宽度：13
}
}，
位置：{
目标：元素
}
};
无功默认值= optionDictionary [scope.positionType]
$ .extend（选项，默认）;
element.qtip（'消灭'）;
element.qtip（选件）; }
}
}
）;
其他指令如下：
mainApp.directive（'cvErrorOnBlur'，['$编译，函数（）{
返回{
限制：'A'，
要求：'ngModel'，
更换：真实，
链接：功能（范围，元素，属性控制器）{
element.bind（模糊，函数（）{
如果（$控制器脏放大器;＆安培;控制器$无效）{
element.addClass（'错误'）;
element.attr（CV-提示'，'左'）; }其他{
element.removeClass（'错误'）;
element.attr（CV-提示'，'右'）; }
}）;
}
}
}]）;
在HTML我使用它像
＆LT;输入类型=文本CV-提示=正确的CV-错误的模糊/＆GT;
您必须使用$观察或$观看监控更改属性，但属性的值，就必须插值（{{}} ）
例如：
＆LT;输入类型=文本CV-提示={{右}}CV-错误的模糊/＆GT;ATTRS。观察$（'cvTooltip'，功能（为newValue，属性oldValue）{}）;
您可以只把它改写成一个单一的指令？
mainApp.directive（'cvTooltip'，函数（）{
VAR optionDictionary = {
'对'： {
位置：{
我：中间偏左，
位置：右心
}，
风格：{
小费： {
角落：中间偏左，
高度：10
}
}
}，
'剩下'： {
位置：{
我：中间偏右，
位置：左心
}，
风格：{
小费： {
角落：右中心，
高度：10
}
}
}
};
返回{
限制：'A'，
要求：^ ngController
链接：函数（范围，元素，ATTRS，控制器）{
VAR初值= attrs.cvTooltip;
的console.log（初值）;
VAR的选择= {
风格：{
小费： {
宽度：13
}
}，
位置：{
目标：元素
}
};
如果（$控制器脏放大器;＆安培;控制器$无效）{
element.addClass（'错误'）;
无功默认值= optionDictionary ['左'];
$ .extend（选项，默认）;
element.qtip（'消灭'）;
element.qtip（选件）; }其他{
element.removeClass（'错误'）;
无功默认值= optionDictionary ['右'];
$ .extend（选项，默认）;
element.qtip（'消灭'）;
element.qtip（选件）;
}
}
}
I have created a directive for encapsulating qTip2 library into my angular application (as described in another SO question) . I have a dictionary with different configurations for qTip and depending on the value I pass on the attribute cv-tooltip the appropriate configuration is passed in the .qtip call in the link function. This works fine for directives that are set in html (eg. shows a qtip on the right and cv-tooltip="left" on the left).
Problem arises when I change the value of the attribute from cv-tooltip="right" to cv-tooltip="left" from another directive, the tooltip directive link function does not re-run when the value changes and thus the qTip is not updated with the correct configuration.
qtip directive looks like this:
mainApp.directive('cvTooltip', function () {
var optionDictionary = {
'right': {
position: {
my: 'center left',
at: 'right center'
},
style: {
tip: {
corner: 'left center',
height: 10
}
}
},
'left': {
position: {
my: 'center right',
at: 'left center'
},
style: {
tip: {
corner: 'right center',
height: 10
}
}
}
};
return {
restrict: 'A',
scope: {
positionType: '=cvTooltip'
},
link: function (scope, element, attrs) {
var options = {
style: {
tip: {
width: 13
}
},
position: {
target: element
}
};
var defaults = optionDictionary[scope.positionType];
$.extend(options, defaults);
element.qtip('destroy');
element.qtip(options);
}
}
}
);
Other directive looks like:
mainApp.directive('cvErrorOnBlur', ['$compile', function () {
return {
restrict: 'A',
require: 'ngModel',
replace: true,
link: function (scope, element, attributes, controller) {
element.bind("blur", function () {
if (controller.$dirty && controller.$invalid) {
element.addClass('error');
element.attr('cv-tooltip', 'left');
} else {
element.removeClass('error');
element.attr('cv-tooltip', 'right');
}
});
}
}
}]);
In html I use it like
<input type="text" cv-tooltip="right" cv-error-on-blur />
You would have to use $observe or $watch to monitor changes to the attribute, but the value of the attribute would have to be interpolated ({{}})
Example:
<input type="text" cv-tooltip="{{right}}" cv-error-on-blur />
attrs.$observe('cvTooltip', function(newValue, oldValue) {
});
Could you just rewrite it into a single directive?
mainApp.directive('cvTooltip', function () {
var optionDictionary = {
'right': {
position: {
my: 'center left',
at: 'right center'
},
style: {
tip: {
corner: 'left center',
height: 10
}
}
},
'left': {
position: {
my: 'center right',
at: 'left center'
},
style: {
tip: {
corner: 'right center',
height: 10
}
}
}
};
return {
restrict: 'A',
require:"^ngController",
link: function (scope, element, attrs, controller) {
var initialValue = attrs.cvTooltip;
console.log(initialValue);
var options = {
style: {
tip: {
width: 13
}
},
position: {
target: element
}
};
if (controller.$dirty && controller.$invalid) {
element.addClass('error');
var defaults = optionDictionary['left'];
$.extend(options, defaults);
element.qtip('destroy');
element.qtip(options);
} else {
element.removeClass('error');
var defaults = optionDictionary['right'];
$.extend(options, defaults);
element.qtip('destroy');
element.qtip(options);
}
}
}
这篇关于当属性更改值指令不运行链接功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
