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>

它运行良好。但是，如果属性发生了更改，则这些更改不会反映在日期选择器中。我想知道我是否可以用这样的东西。。

<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。