分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularjs directive内部controller link函数理解，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

directive内部的controller跟mvc中controller不一样，这里的controller是用来给我们的指令暴露public 方法供外部去调用的。

link：是用来处理指令内部事务的，包括：给元素绑定事件／数据之类的。

require 之后，link就会多一个参数（第四个参数，scope,element,attrs,superCon），angularjs就会自动将superCon注射到link函数，这样就可以用superCon 内部控制器（controller）暴露出来的方法。

指令之间的数据交互，通过内部的controller 暴露出来的方法，来给外部进行调用的。

directive代码

var mymodule = angular.module("Mymodule",[]);
mymodule.directive("supeRMAN",function() {
    return {
        scope: {},reStrict: 'AE',controller: function($scopE) {
            $scope.abilities = [];
            this.addStrength = function() {
                $scope.abilities.push("strength");
            };
            this.addSpeed = function() {
                $scope.abilities.push("speed");
            };
            this.addLight = function() {
                $scope.abilities.push("light");
            };
        },link: function(scope,attrs) {
            element.addClass('btn btn-priMary');
            element.bind("mouseenter",function() {
                console.log(scope.abilities);
            });
        }
    }
});
mymodule.directive("strength",function() {
    return {
        require: '^supeRMAN',supeRMANCtrl) {
            supeRMANCtrl.addStrength();
        }
    }
});
mymodule.directive("speed",supeRMANCtrl) {
            supeRMANCtrl.addSpeed();
        }
    }
});
mymodule.directive("light",supeRMANCtrl) {
            supeRMANCtrl.addLight();
        }
    }
});

HTML代码

<!doctype html>
<html ng-app="Mymodule">

<head>
    <Meta charset="utf-8">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../library/angular.js"></script>
	<script src="../js/directives/Directive&directive.js"></script>
</head>

<body>
	<div class="row">
		<div class="col-md-3">
			<supeRMAN strength>动感超人---力量</supeRMAN>
		</div>
	</div>
	<div class="row">
		<div class="col-md-3">
			<supeRMAN strength speed>动感超人2---力量+敏捷</supeRMAN>
		</div>
	</div>
	<div class="row">
		<div class="col-md-3">
			<supeRMAN strength speed light>动感超人3---力量+敏捷+发光</supeRMAN>
		</div>
	</div>
</body>

</html>

参照网 angularjs实战