zoukankan      html  css  js  c++  java
  • angular directive指令的复用

    “指令之之所以要定义成指令就是为了复用!”

    指令一定是可以用在不同的controller里面的,为了在不同的controller去使用它,我们一定要给指定的配置项一个指令。这样才能跟外面的控制器进行交互。

    举例如下:

    html:

        <div ng-controller="MyCtrl">
            <loader howToLoad="loadData()">滑动加载</loader>
        </div>
        <div ng-controller="MyCtrl2">
            <loader howToLoad="loadData2()">滑动加载2</loader>
        </div>

    js:

    var app = angular.module('MyModule',[]);
    
    app.controller('MyCtrl', ['$scope',function($scope){
        $scope.loadData = function(){
            console.log("加载数据中...");
        }
    }]);
    
    app.controller('MyCtrl2', ['$scope',function($scope){
        $scope.loadData2 = function(){
            console.log("加载数据中...2222");
        }
    }]);
    
    app.directive("loader",function(){
        return{
            restrict: "AE",
            link:function(scope,element,attrs){      /*link函数有4个参数,最后一个父控制器,此处用了3个*/
                element.bind('mouseenter',function(){
                    // scope.$apply("loadData()");
                    // 注意这里的坑,howtoload会被转换成小写的howtoload
                    scope.$apply(attrs.howtoload);
                });
            }
        }
    });
  • 相关阅读:
    第一周博客作业(学习历程和感想)
    WordCount 基础功能
    MyBatis 分页插件 PageHelper 使用
    手机尾号猜年龄骗局解密
    逻辑思维题一
    给div添加滚动条
    my97中文乱码问题
    cookie中文乱码
    多线程下的单例模式
    HTML5的入门与深入理解
  • 原文地址:https://www.cnblogs.com/91allan/p/5427064.html
Copyright © 2011-2022 走看看