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如果要将复杂对象传递给指令。