Question

对Custom Directives不熟悉我做了一个简单的例子来演示Link属性的用法。所有，我能够证明，我们也可以定义或改变范围。我们可以用它做任何其他事情还是用于任何其他有用的目的？

HTML

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> 
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
<div peter></div>
{{name}}
<script>
//app declaration
var app = angular.module('myApp',[]);
//controller declaration
app.controller('myCtrl', function($scope){
    $scope.name = "Hi dear!"
});
//directives declaration
app.directive('peter', function(){
    return{
        restrict: 'A',
        template: '{{name}}',
        link: function(scope, element, attr){
            scope.name = "Hira";
        }
    }
});
</script> 
</body> 
</html>

结果

希拉
希拉

Answer 1

链接功能的签名如下所示：function(scope, iElement, iAttrs, controller, transcludeFn)。

正如您所提到的，第一个参数scope授予您访问指令范围的权限。

第二个参数iElement授予您访问指令DOM元素的angular.element包装器（jQuery或jqLite，具体取决于可用的内容）。

第三个参数iAttrs授予您访问指令属性的权限。

第四个参数controller授予您访问指令可以（可选）所需的控制器的权限。这些控制器可用于与来自其他控制器的公开API进行交互。

如果自定义指令要转换任何HTML内容，则第五个参数transcludeFn与如何执行转换相关。

有关详细信息，请参阅angular.compile documentation。

Answer 2

Directive主要用于操作Dom，您可以使用link function更改Dom元素的属性。

Angular使用Jqlite进行dom操作。

这是一个使用Jqlite解释Dom操作的例子，

.directive('sampleDirective', function(){
     return {
            link: function(scope, element, attrs) {
            // this example binds a behavior to the
            // mouseenter event
            element.bind("mouseenter", function(){
                ... do stuff after mouseenter ...

            }
            element.bind("click", function(){
                ... do stuff after mouseenter ...

            }
            element.bind("keyup", function(){
                ... do stuff after mouseenter ...

            }
    },
    restrict: ‘E’,
    template: <div>Hello, World!</div>
         }
})

链接功能参数：

链接函数的3个标准参数。（加上可选的第4个：控制器。）如果指定，它们由指令函数作为args提供。

范围：任何范围对象都是本地

在this

上声明的

元素：元素

attrs：一个对象，包含在元素上定义的html属性，包括指令调用本身

不是按名称提供给函数，而是按顺序提供。给他们带来你想要的东西。

This is link reference

This is the jqlite method reference used in angular

AngularJs链接或PostLink用法示例

2 个答案: