AngularJs-指令和控制器交互

时间 2019-11-12

原文原文链接

前言：

　　前段时间咱们学习了angular的指令，他经过ECMA的方式建立元素，能够让咱们共用这些元素，咱们也知道能够经过 link的方法给这个指令添加一些动做事件，本节，咱们将写入和让angular的指令能和控制器进行交互。html

1，指令和控制器的交互

<!DOCTYPE html>
<html ng-app="MyController">
<head>
    <meta charset="utf-8">
    <title>指令复用</title>
</head>
<body>
    <div ng-controller="MyCtrl">
        <loader>滑动加载</loader>
    </div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="js/directive-controller.js"></script>
</html>

上面的代码平淡无奇，有个控制器有个指令（loader），下面能够看到咱们经过 directive建立了这个指令，而且咱们经过link的方法给他赋值鼠标事件(mouseenter)。app

var myModule = angular.module('MyController',[]); myModule.controller('MyCtrl',function($scope){ $scope.loadData = function(){ console.log("加载数据..."); } }) myModule.directive('loader',function(){ return{ restrict:'AE', link:function(scope,element,attr){ element.bind('mouseenter',function(){ scope.loadData(); }) } } })

咱们来看看运行的结果，ok，咱们打印出来 ”加载数据...“。学习

2，多个控制器如何公用一个指令？

　　咱们建立指令的目的就是在于，可以复用它，固然这也是MVC的终极思想。spa

　　咱们的代码也发生了一些变化rest

<!DOCTYPE html>
<html ng-app="MyController">
<head>
    <meta charset="utf-8">
    <title>指令复用</title>
</head>
<body>
    <div ng-controller="MyCtrl">
        <loader loadDataFn="loadData()">滑动加载</loader>
    </div>
    <div ng-controller="MyCtr2">
        <loader loadDataFn="loadData2()">滑动加载2</loader>
    </div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="js/directive-controller.js"></script>
</html>

首先，咱们建立了两个控制器 MyCtr1 和 MyCtr2，同时呢，咱们给 loader 这个指令，加了一个自定义的属性叫 loadDataFn，给他赋的值是下面js中的两个对应控制器中的方法loadData()和loadData2()；code

var myModule = angular.module('MyController',[]); myModule.controller('MyCtrl',function($scope){ $scope.loadData = function(){ console.log("加载数据..."); } }) myModule.controller('MyCtr2',function($scope){ $scope.loadData2 = function(){ console.log("加载数据2..."); } }) myModule.directive('loader',function(){ return{ restrict:'AE', link:function(scope,element,attr){ element.bind('mouseenter',function(){ // scope.loadData();
                // scope.$apply("loadData()");
 scope.$apply(attr.loaddatafn); }) } } })

固然，在指令的 link方法中咱们也作了改变，link方法呢，给我提供了四个参数:scope、element、attr和父控制器。咱们给元素绑定事件也是经过参数中的 element.bind()完成的，咱们也能够经过 attr 属性获取指令上的属性，而后经过$apply的方法来完成调用就行了。在此要提交你们的是，咱们在获取指令元素上的属性的时候，必定要注意，咱们要把属性的名字写成小写的，这是angularJS的坑。htm