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 发生变化，这些变化不会反映在日期选择器中。我想知道我是否可以使用这样的东西..

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

并在指令中使用 scope{ data: "=fielddata"} 并在我的 link 函数中使用 scope.data.fieldname

而不是 attrs.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。

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

Angularjs directive how to detect changes in the attributes

javascript

jquery

jquery-ui

angularjs

angularjs-directive