directive之link

最新推荐文章于 2024-09-26 01:42:12 发布

youhebuke225

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量202

点赞数

分类专栏： angularJS 文章标签： angular.js javascript 前端

本文链接：https://blog.csdn.net/youhebuke225/article/details/122204303

版权

angularJS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

作用

link函数的作用与controller差不多，同样可以像controller中一样绑定绑定事件和属性，甚至参数也是参数多的，他一共有四个参数，前三个参数与controller相同，这里说一下第四个参数

如果当前的指令有require，那么第四个参数就是require引用的作用域
如果当前的指令没有require，那么第四个参数就是当前的controller 本身
- 而在controller上面添加到this上面的属性和方法就可以通过第四个参数访问

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <h1>{{indexName}}</h1>
      <h2>{{childName}}</h2>
      <!-- 自定义组件 -->
      <hello-world></hello-world>
    </div>

    <script>
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function ($scope) {
        $scope.indexName = "主页";
        $scope.childName = "父作用域";
      });
      app.directive("helloWorld",function(){
          return {
            restrict:'E',
            template:`
            <div>
              <div>{{linkName}}</div>
              <button ng-click="handleClick()">{{childName}}</button>
            </div>
            `,
            controller:function($scope){
              $scope.childName = "自定义组件"
              this.thisName = "this上的属性"
            },
            link:function(scope, elem, attrs, controller){
                console.log(scope.childName);
                console.log(controller);
                scope.linkName = "link中绑定的属性"
                scope.handleClick = function(){
                    alert("Hello World")
                }
            }
          }
      })
    </script>

  </body>
</html>