当属性更改值时指令不运行链接功能 [英] Directive does not run link function when attribute changes value
问题描述
我创建了一个指令,用于将 qTip2 库封装到我的 angular 应用程序中(如 another SO 中所述问题).我有一个带有不同 qTip 配置的字典,并且根据我在属性 cv-tooltip 上传递的值,在链接函数的 .qtip 调用中传递了适当的配置.这适用于在 html 中设置的指令(例如,在右侧显示 qtip,在左侧显示 cv-tooltip="left").
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).
当我从另一个指令将属性值从 cv-tooltip="right" 更改为 cv-tooltip="left" 时出现问题,当值更改时工具提示指令链接函数不会重新运行,因此qTip 未更新为正确的配置.
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 指令如下所示:
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);
}
}
}
);
其他指令看起来像:
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');
}
});
}
}
}]);
在 html 中我使用它就像
In html I use it like
<input type="text" cv-tooltip="right" cv-error-on-blur />
推荐答案
您必须使用 $observe 或 $watch 来监视对属性的更改,但必须对属性值进行插值 ({{}})
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 ({{}})
示例:
<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屋!