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

如果我将它包裹在大括号中，它会中断，我在控制台中出错。如果我将它包装在大括号中并将范围更改为＆＃39; @＆＃39;而不是＆＃39; =＆＃39;，它有效。但它发送字符串＆＃34; true＆＃34;或＆＃34; false＆＃34;，而不是布尔值。

我哪里错了？

Answer 1

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

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

Answer 2

您不必使用'='观察。有关详细信息，请参阅以下链接，我相信它比文档更强大。

What is the difference between '@' and '=' in directive scope in AngularJS?

就你的代码而言，我会仔细检查isLoading变量以确保它是一个布尔值。

Answer 3

当你将范围定义从“=”更改为“@”时，你只想传递一个字符串，而不是双向绑定模式。当然，您可以将其转换为true，例如：

var myBool = Boolean("false"); // === true

var myBool = Boolean("true"); // === true

但要小心，因为任何字符串都可以视为true，如：

var myBool = Boolean("foo"); // === true

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

3 个答案: