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实战

angularjs directive内部controller link函数理解

猜你在找的Angularjs相关文章