zoukankan html css js c++ java

directive talks to controller

<!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个参数的作用

查看全文

相关阅读:
虚函数
 class与struct的区别
 HTTP是什么连接
 长连接与短连接
 多线程的主要优点
 overload、override、overwrite的介绍
 常用的Linux命令
 IO模型——IO多路复用机制
 栈区与堆区的区别
 软链接和硬链接到底有啥区别

原文地址：https://www.cnblogs.com/lihaozhou/p/3681946.html