AngularJS指令和控制器之间怎么交互

半兽人 发表于: 2018-10-02   最后更新时间: 2023-01-16 10:39:03  
{{totalSubscript}} 订阅, 3,085 游览

我们先看一个简单的代码:

<!doctype html>
<html ng-app="MyModule">
<head>
    <meta charset="utf-8">
</head>
<body>
<div ng-controller="MyCtrl">
    <loader>滑动加载</loader>
</div>
</body>
<script src="framework/angular-1.3.0.14/angular.js"></script>
</html>

<script>
    var myModule = angular.module("MyModule", []);
    myModule.controller('MyCtrl', ['$scope', function ($scope) {
        $scope.loadData = function () {
            console.log("加载数据中...");
        }
    }]);

    myModule.directive("loader", function () {
        return {
            restrict: "AE",
            link: function (scope, element, attrs) {
                element.bind('mouseenter', function (event) {
                    scope.loadData();
                });
            }
        }
    });
</script>

通过link监听鼠标滑动时间,调用控制器loadData方法。

指令的复用

上面的实现方式,只能加载调用指定的控制器,无法进行复用,我们通过属性,来实现调用不同的控制器,来加载不同的数据:

<!doctype html>
<html ng-app="MyModule">
<head>
    <meta charset="utf-8">
    <script src="https://www.orchome.com/user/js/angular-1.5.8.min.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
    <loader howToLoad="loadData()">滑动加载</loader>
</div>
<div ng-controller="MyCtrl2">
    <loader howToLoad="loadData2()">滑动加载</loader>
</div>
</body>
</html>

<script>
    var myModule = angular.module("MyModule", []);
    myModule.controller('MyCtrl', ['$scope', function ($scope) {
        $scope.loadData = function () {
            console.log("加载数据中...");
        }
    }]);
    myModule.controller('MyCtrl2', ['$scope', function ($scope) {
        $scope.loadData2 = function () {
            console.log("加载数据中...22222");
        }
    }]);
    myModule.directive("loader", function () {
        return {
            restrict: "AE",
            link: function (scope, element, attrs) {
                element.bind('mouseenter', function (event) {
                    // scope.loadData();
                    // scope.$apply("loadData()");
                    // 注意这里的坑,howToLoad会被转换成小写的howtoload
                    scope.$apply(attrs.howtoload);
                });
            }
        }
    });
</script>
更新于 2023-01-16
在线,34分钟前登录

查看AngularJS更多相关的文章或提一个关于AngularJS的问题,也可以与我们一起分享文章