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，因此您需要对每次更改采取自定义操作，因此请自行添加手表。 E.g：

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。

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

1 个答案: