Question

我正在学习角度，有时候偶然发现了解代码及其意义。请参阅下面的示例代码并告诉我指令中的链接选项是什么？

什么样的目的链接选项解决或做什么？什么时候链接选项内的代码火了请给我一些关于链接选项的见解。感谢

 var myApp = angular.module('myApp', []);
    myApp.directive('ngFinishRender', function ($timeout) {
        return {
            restrict: 'A',
            link: function (scope, element, attr) {
                if (scope.$last === true) {
                    $timeout(function () {
                        scope.$eval(attr.ngFinishRender);
                    }, 0);
                }
            }
        }
    });

    myApp.controller('myController', function ($scope, $timeout) {
        $scope.lists = [
            { name: 'A', isShow: true },
            { name: 'B', isShow: true },
            { name: 'C', isShow: false },
            { name: 'D', isShow: false },
            { name: 'E', isShow: true },
            { name: 'F', isShow: true },
        ];

        $timeout(function () {
            $scope.lists[2].isShow = true;
        }, 3000);

        $timeout(function () {
            $scope.lists[3].isShow = true;
        }, 6000);      

        $scope.finish = function () {
            console.log('finish');
        }
    });

Answer 1

Angular遍历dom中的所有元素并搜索指令声明，然后编译它们并附加与这些指令相关的功能。

链接函数在编译阶段之后的指令触发，并充当超级电源控制器，能够要求和使用元素周围的其他指令及其控制器，当然 - 操纵元素，监听事件等例如，你可以根据你的范围值来操纵dom。

Answer 2

请参阅此页https://docs.angularjs.org/guide/directive 在这里，您可以阅读指令中的链接选项。

想要修改DOM的指令通常使用 link 选项来注册DOM侦听器以及更新DOM。它在克隆模板后执行，并且将放置指令逻辑。

对于一个实例;

这是我们的控制器;

var myApp = angular.module('myApp',[]);
myApp.directive('hotArea', function() {
    return {
        link: function(scope, element, atts) {
            element.bind("mouseover", function(){
                element.addClass("areaOn");
                console.log("mouseove");
            });
            element.bind("mouseout", function(){
                element.removeClass("areaOn");
                console.log("mouseove");
            });
        }
    };
}
);

myApp.controller('myController',function($scope){});

我们的html页面;

<style>
     .areaOn { border: 3px solid red; }
     .areaOff { border: none;}
</style>
<body>
    <div ng-controller="myController">
        <div hot-area>This is an area</div>
    </div>
</body>

当您运行此代码段时，您会注意到我们定义的指令将能够修改DOM。在这个例子中，我们将一个区域标记为＆＃34; hotArea＆＃34;对于这个区域＆＃34; mouseover＆＃34;和＃34; mouseout＆＃34;函数具有与默认函数不同的行为。

Angular：指令中link选项的意义是什么

2 个答案: