javascript - 带有 bool 属性的 Angular 指令传递字符串而不是 bool

Question

我正在尝试创建一个指令来禁用容器内的所有输入元素，但我在使用该属性时遇到了问题。这就是我对该指令的了解

指令

angular.module('common')
    .directive('bdDisabled', [function () {
            return {
                restrict: 'A',
                scope: {
                    bdDisabled: '='
                },
                link: function (scope, element, attrs) {
                    attrs.$observe('bdDisabled', function(newValue, oldValue) {
                        if (newValue !== oldValue) {
                            if (newValue) {
                                element.find('input, select, button, submit, textarea').prop('disabled', 'disabled');
                            } else {
                                element.find('input, select, button, submit, textarea').removeProp('disabled');
                            }

                        }
                    });
                }
            };
        }
    ]);

这就是我想要的使用方式:

<div class="cg-content cg-shadow" bd-disabled="isLoading">

问题在于属性值是字符串 isLoading 而不是值。

如果我将它用大括号括起来，它就会破裂，并在控制台中收到错误消息。如果我将它放在大括号中并将范围更改为“@”而不是“=”，它就可以工作。但它发送的是字符串“true”或“false”，而不是 bool 值。

我哪里出错了？

Answer 1

正如我在评论中建议的那样，我会将 attrs.$observe 与 scope.$watch 切换。根据个人喜好，我还会使用函数表达式而不是字符串，因为如果您正在使用(或将要使用) typescript ，如果属性发生变化，您会收到通知，其中字符串可能会保持原样是:

scope.$watch(function () {
      return scope.bdDisabled;
      }, 
      function (newVal, oldVal) {
          ...
      }
);