angularjs指令link函数参数scope,指令controller依赖注入的$scope,与指令外部controller的$scope的关系

最新推荐文章于 2025-03-12 11:14:17 发布

timelessmemoryli

最新推荐文章于 2025-03-12 11:14:17 发布

阅读量6.2k

点赞数 2

分类专栏： Angularjs 文章标签： angular scope

本文链接：https://blog.youkuaiyun.com/u014788227/article/details/50435588

版权

Angularjs 专栏收录该内容

55 篇文章

订阅专栏

本文通过代码示例探讨了AngularJS指令中scope为false时，指令内部的link函数、controller以及外部controller的$scope之间的关系。当scope为false时，它们共享同一个$scope，导致变量btnName的更改相互影响。而在scope为isolate的情况下，指令内部的scope与外部scope独立，controller与link函数的scope相同，执行顺序为先执行controller再执行link。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

还是看代码

当指令中scope:false时

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="bootstrap.min.css">
        <script src="jquery.min.js"></script>
        <script src="angular.min.js"></script>
        <script src="bootstrap.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('myapp', []);
            app.controller('myController', function($scope) {
                $scope.btnName = 'click';
                $scope.click = function() {
                    console.log($scope.btnName);
                };
            });
            app.directive('duplicate', function(){
              return {
                restrict: 'EA',
                replace: true,
                transclude: true,
                link: function(scope, elem, attrs) {
                    console.log('link : ' + scope.btnName);
                    scope.btnName = 'link';
                },
                controller: ['$scope', function($scope) {
                    console.log('controller: ' + $scope.btnName);
                }],
                template:"<span ng-transclude></span>"
              }
            });
        </script>
        <style type="text/css">
        </style>
    </head>
    <body ng-app="myapp" ng-controller="myController">
       <div duplicate>
           <button ng-click="click()" class="btn btn-primary">{{btnName}}</button>
       </div>
    </body>
</html>

可以看到这三个scope是同一个scope, 一开始btnName为click,后来在link函数中改变为link,于是button也就显示为link.

scope为isolate时

<!DOCTYPE html>

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="bootstrap.min.css">
        <script src="jquery.min.js"></script>
        <script src="angular.min.js"></script>
        <script src="bootstrap.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('myapp', []);
            app.controller('myController', function($scope) {
                $scope.btnName = 'click';
                $scope.click = function() {
                    console.log($scope.btnName);
                };
            });
            app.directive('duplicate', function(){
              return {
                restrict: 'EA',
                replace: true,
                transclude: true,
                scope: {
                    btnName:'@'
                },
                link: function(scope, elem, attrs) {
                    console.log('link : ' + scope.btnName);
                },
                controller: ['$scope', function($scope) {
                    console.log('controller: ' + $scope.btnName);
                }],
                template:"<span ng-transclude></span>"
              }
            });
        </script>
        <style type="text/css">
        </style>
    </head>
    <body ng-app="myapp" ng-controller="myController">
       <div duplicate btn-name="111111">
           <button ng-click="click()" class="btn btn-primary">{{btnName}}</button>
       </div>
    </body>

</html>

可以看到，指令中scope与外部scope独立，controller中的scope与link参数中的scope一致，并且先执行controller再执行link,所以不确定的话可以在controller中修改然后观察link函数中scope中的值，如果也变了，那就说明controller与link中的scope一样.(验证过，确实一起变了)