<!DOCTYPE html> <html ng-app="demo"> <head> <title>directive talks to controller</title> <script src="angular.min.js" type="text/javascript"></script> </head> <body ng-controller="demoController"> <div enter>{{name}}</div> </body> <script> var demo = angular.module("demo",[]); demo.controller("demoController", function ($scope) { $scope.name = "Jackey works hard"; $scope.show = function () { console.log("hei"); }; }); demo.directive("enter", function () { return { restrict: "A", link: function (scope, element, attrs) { element.bind("mouseenter", function () { scope.show(); }); } }; }); </script> </html>
directive指令里面link参数的scope,可调用外面的方法
修改一下，可用$apply调用方法
<!DOCTYPE html> <html ng-app="demo"> <head> <title>directive talks to controller</title> <script src="angular.min.js" type="text/javascript"></script> </head> <body ng-controller="demoController"> <div enter>{{name}}</div> </body> <script> var demo = angular.module("demo",[]); demo.controller("demoController", function ($scope) { $scope.name = "Jackey works hard"; $scope.show = function () { console.log("hei"); }; }); demo.directive("enter", function () { return { restrict: "A", link: function (scope, element, attrs) { element.bind("mouseenter", function () { scope.$apply("show()"); }); } }; }); </script> </html>
再修改一下，可使用attrs将方法传进来
<!DOCTYPE html> <html ng-app="demo"> <head> <title>directive talks to controller</title> <script src="angular.min.js" type="text/javascript"></script> </head> <body ng-controller="demoController"> <div enter="show()">{{name}}</div> </body> <script> var demo = angular.module("demo",[]); demo.controller("demoController", function ($scope) { $scope.name = "Jackey works hard"; $scope.show = function () { console.log("hei"); }; }); demo.directive("enter", function () { return { restrict: "A", link: function (scope, element, attrs) { element.bind("mouseenter", function () { scope.$apply(attrs.enter); }); } }; }); </script> </html>
这个例子可以清楚地看到link3个参数的作用