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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。