当属性更改值时，指令不运行链接function

我已经创建了一个指令，用于将qTip2库封装到我的角度应用程序中（如另一个SO问题中所述 ）。 我有一个字典，其中包含qTip的不同配置，并且根据我传递给属性cv-tooltip的值，在链接函数的.qtip调用中传递了相应的配置。 这适用于在html中设置的指令（例如，在右侧显示qtip，在左侧显示cv-tooltip =“left”）。

当我从另一个指令将cv-tooltip =“right”的属性值更改为cv-tooltip =“left”时出现问题，当值发生变化时，tooltip指令链接函数不会重新运行，因此qTip不会使用正确的配置更新。

qtip指令如下所示：

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中，我使用它

Answer 1

您必须使用$ observe或$ watch来监视属性的更改，但必须插入属性的值（{{}}）

例：

  attrs.$observe('cvTooltip', function(newValue, oldValue) { }); 

你能把它重写成一个指令吗？

 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); } } }