Angularjs指令如何检测属性的变化

Question

我在我的项目中使用 jquery ui 和 angularjs。我有这样的指令。

app.directive('datepicker', function() {
    return {
         link: function (scope, element, attrs) {
          element.datepicker({
            altField: "#d" + attrs.fieldname + "_alt",
            altFormat: attrs.dateformat,
          });
        }
    };

我喜欢用它。

<div fieldname="{{field.name}}" dateformat="{{field.dateformat}}" datepicker></div>

它工作正常。但是如果 attrs 发生变化，这些变化不会反映在 datepicker 中。我想知道我是否可以使用这样的东西..

<div fielddata="field" datepicker></div>

在指令中使用scope{ data: "=fielddata"}，在我的链接函数中使用attrs.fieldname而不是scope.data.fieldname

感谢您的帮助

Answer 1

你必须添加手表才能做你想做的事。使用上面的scope: {} 确实在引擎盖下添加了手表，以将指令的隔离范围与外部数据同步。但是由于您使用的是 jQueryUI，因此您需要对每次更改都采取自定义操作，因此您只需自己添加手表即可。例如：

app.directive('datepicker', function() {
    return {
        link: function (scope, element, attrs) {
            element.datepicker({
                altField: "#d" + attrs.fieldname + "_alt",
                altFormat: attrs.dateformat,
            });

            attrs.$observe('dateformat', function(newval) {
                element.datepicker('option', 'altFormat', newval);
            });

            // and so on for every attribute
        }
    };
});

attrs.$observe 将适用于内插属性，即带有{{...}} 表达式的属性。如果您想将复杂的对象传递给您的指令，您可能需要使用$parse 和scope.$watch。