javascript - Angular 隔离范围值可以由 "true"或空设置

Question

我有一个自定义的 Angular Directive(指令)，为了简洁起见，我们将其称为 map。

它有一个像这样设置的隔离范围。

scope: {
    latitude: '=?',
    longitude: '=?',
    draggable: '=?'
},

我通常在我的链接函数中放置一些东西，将范围值设置为已在属性中设置的值，或者如果未设置任何值则设置为默认值，以便开发人员可以根据需要添加 draggable="false"，否则我们会自动将其默认为 true，因此在链接函数中我会使用它。

$scope.draggable = angular.isDefined($scope.draggable) ? $scope.draggable : myDefaults.draggable;

问题是我希望以下所有内容都能在 html 中有效使用

<map draggable></map>
<map draggable="true"></map>
<map draggable="false"></map>

但是第一行不起作用，因为 angular.isDefined() 是 false。

我是否应该先检查它是否已定义，如果没有，则在返回默认值之前使用类似 attrs.draggable 的东西来查看该属性是否存在？

如果是这样，那就更复杂了，因为我需要将我的代码放在 Controller 而不是链接函数中(因为它需要与子指令对话)并且我无权访问“attrs”或“element”来自 Controller 。

如有任何帮助，我们将不胜感激。

Answer 1

如果您不想在draggable 属性中使用范围变量，只需在指令的link 函数中使用$attrs 参数对于所有四个用例:

link: function ($scope, $element, $attrs) {
    if ("draggable" in $attrs) {
        $scope.draggable = $scope.draggable === "" || $attrs.draggable === "true";
    } else {
        $scope.draggable = myDefaults.draggable;
    }
}

说明:如果draggable 属性不存在，则它不会出现在$attrs 对象中。如果它存在但未设置，它将等于空字符串。如果它存在并已设置，它将等于您将其设置为的字符串值:"true" 或 "false"。

如果您使用 $attrs，不必担心通过指令的 scope 属性分配 draggable —— 它会被覆盖。

请注意，如上所述，此解决方案不允许您将范围变量绑定(bind)到属性。为此，您必须在指令中使用 scope 属性。

对于好奇的人，the link function .