angularjs - 如何解析AngularJS中的属性

Question

我正在写一个指令，我想要一个可以接受表达式、模板 url 或字符串的属性。有没有我可以使用的角度方法来解决这样的参数？我的意思是我可以在哪里做......

<directive dialog="path/to/template.htm"></dialog>

或者

<directive dialog="Are you sure you want to do that?" type="confirm"></dialog>

在我的指令代码中，我需要做的就是......

directive('dialog', function ($http) {
    return {
        compile: function (element, attrs) {
            var dialogContent = angular.resolveExpression(attrs.dialog);
        }
    }
}).

这个想法是，如果template.htm其中包含表达式或指令，它们都将被正确解析。

Answer 1

您应该使用attribute $observe它来实现它，您甚至会在属性更改时获得更新：

app.directive('test', function() {
  return {
    link: function(scope, elm, attr) {
      attr.$observe('dialog', function(value) {
        // this function will run everytime the attribute evaluate to
        // a different value, and "value" will be the already interpolated
        // string.
      });
    }
  };
});

这是一个工作Plnker。

Answer 2

正确的方法是使用&范围选项...

directive('slideToggle', function () {
        return {
            replace: true,
            restrict: 'E',
            scope: {
                on: '&',
                off: '&',
                bindto: '='
            },
            template: '<input type="checkbox" name=""/>',
            link: function (scope, element, attrs) {
                $(element).iButton({
                    labelOn: attrs.onlabel,
                    labelOff: attrs.offlabel,
                    enableDrag: (attrs.draggable == "false") ? false : true,
                    change: function () {
                        if (scope.bindto) {
                            scope.bindto = false;
                            scope.on();
                        } else {
                            scope.bindto = true;
                            scope.off();
                        }
                        scope.$apply();
                    }
                });
            }
        }
    })

然后在我的 HTML 中：

<slide-toggle onLabel="Active" offLabel="Inactive" bindTo="workstation.active" off="makeInactive()" on="makeActive()"></slide-toggle>