javascript - $scope、$element 和 $attrs 变量到底有多相关(如果有的话)？

Question

我写了一个自定义的 angular-js 指令，在离开半填和未保存的表单时要求用户确认。

它工作得很好，但我不确定我是否理解我在做什么。

代码如下所示:

HTML:

<input type="text" name="username" form-confirmation/>

应用程序.js:

angular.module('myModule').directive('formConfirmation', formConfirm) 

function formConfirm() {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attrs) {

            function conf(event) {

                if ($scope[$element.attr('name')].$dirty) {
                    if (confirm("You have unsaved changes! Are you sure you wish to leave this page?") !== true) {
                        event.preventDefault();
                    }
                }
            };

            $scope.$on('$locationChangeStart', conf);
        }
    }
}

我的问题:

1) 我首先尝试使用 if($element.$dirty) 但这没有用。 $element 与 $scope[$element.attr('name')] 有何不同？

2) $element、$attrs、$scope 之间有什么关系？

3)$element的attr方法从何而来？

Answer 1

它们与 DOM 中存在的元素相关联，并且由于存在指令(在本例中为 form-confirmation)导致 AngularJS 在该元素上执行编译操作。

所有这些项目的定义都可以在 directive documentation 中轻松找到在 Creating a Directive that Manipulates DOM 下链接函数:

• scope is an Angular scope object.
• element is the jqLite-wrapped element that this directive matches.
• attrs is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.
• controller is the directive's required controller instance(s) or its own controller (if any). The exact value depends on the directive's require property.
• transcludeFn is a transclude linking function pre-bound to the correct transclusion scope.

进一步分解您的问题:

1. 我首先尝试使用 if($element.$dirty) 但这没有用。如何$element 与 $scope[$element.attr('name')] 不同吗？您正在根据存在于 $element 上的特定属性为 $scope 对象上的属性编制索引。

2. $element、$attrs 和 $scope 之间有什么关系？它们通过包含您的指令的已编译 DOM 元素相关联。

3. $element的attr方法从何而来？由于 $element 是 DOM 元素的 jqLit​​e 包装器，它只是将实际 DOM 注释上存在的属性公开为 attr 属性。

我强烈建议您通读并消化我上面链接的指令文档。它包含丰富的知识，可帮助您理解指令的工作原理，这是 AngularJS 的核心部分。