AngularJS指令与控制器之间的交互功能示例  更新时间:2016年12月14日 10:36:16   作者:小小小小小亮   这篇文章主要介绍了AngularJS指令与控制器之间的交互功能,结合实例形式分析了AngularJS控制器调用相关指令操作技巧,需要的朋友可以参考下 本文实例讲述了AngularJS指令与控制器之间的交互功能。分享给大家供大家参考,具体如下: 本节我们来看控制器与指令之间的交互 1.首先来看最简单的,在指令中调用父控制器的方法: app.controller(‘myController1’,[‘$scope’,function($scope){ $scope.load=function(){ console.log(‘正在加载数据……’); } }]); app.directive(‘myTest’,function(){ return{ restrict:’E’, link:function(scope,ele,attr){ ele.bind(‘mouseenter’,function(){ scope.load(); }) } } }) 在第一节中,我们已经知道了如何在指令的scope参数中调用父控制器中的方法,这里的: scope.load(); 也可以写成: scope.$apply(‘load()’); 2.同一个指令,在动态调用多个父类控制器中的方法: <div ng-controller="myController1" loadMore="load1()" app.controller(‘myController1’,[‘$scope’,function($scope){ $scope.load1=function(){ console.log(‘正在加载数据……’); } }]); app.controller(‘myController2’,[‘$scope’,function($scope){ $scope.load2=function(){ console.log(‘正在加载数据……..’); } }]); app.directive(‘myTest’,function(){ return{ restrict:’E’, link:function(scope,ele,attr){ ele.bind(‘mouseenter’,function(){ scope.$apply(attr.loadmore()) }) } } }) 注意这里: scope.$apply(attr.loadmore()); loadmore是小写,而在html中,属性是通过驼峰法则得到的。 更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: AngularJS控制器controller正确的通信的方法 详解AngularJS控制器的使用 AngularJS控制器之间的数据共享及通信详解 AngularJS控制器之间的通信方式详解 AngularJS控制器controller给模型数据赋初始值的方法 AngularJS实现自定义指令与控制器数据交互的方法示例 AngularJS开发教程之控制器之间的通信方法分析 AngularJS中一般函数参数传递用法分析 Angularjs中如何使用filterFilter函数过滤 angularjs指令中的compile与link函数详解 AngularJS中控制器函数的定义与使用方法示例 AngularJS 指令 控制器 相关文章 AngularJS $modal弹出框实例代码 这篇文章主要介绍了AngularJS 弹出框 $modal,大家都知道open是$modal唯一方法,通过本文给大家列出了该方法的属性。对angularjs弹出框知识感兴趣的朋友一起看下吧 2016-08-08 AngularJS ui-router刷新子页面路由的方法 这篇文章主要介绍了AngularJS ui-router刷新子页面路由的方法,网上虽然有很多种方法,但是都不适合小编,今天小编给大家分享一个还不错的方法,需要的朋友可以参考下 2018-07-07 基于AngularJs select绑定数字类型的问题 今天小编就为大家分享一篇基于AngularJs select绑定数字类型的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 Angular的事件和表单详解 这篇文章主要为大家详细介绍了Angular的事件和表单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2016-12-12 AngularJS自定义指令之复制指令实现方法 这篇文章主要介绍了AngularJS自定义指令之复制指令实现方法,结合完整实例形式分析了AngularJS自定义指令实现复制功能的相关操作技巧,需要的朋友可以参考下 2017-05-05 Angularjs为ng-click事件传递参数 这篇文章主要介绍了Angularjs为ng-click事件传递参数的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2017-06-06 深入理解Angular2 模板语法 这篇文章主要介绍了Angular2 模板语法的相关资料,非常不错,感兴趣的朋友一起学习吧,需要的朋友可以参考下 2016-08-08 AngularJS实现表单验证功能详解 这篇文章主要为大家详细介绍了AngularJS实现表单验证功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-10-10 动态创建Angular组件实现popup弹窗功能 这篇文章主要介绍了动态创建angular组件实现popup弹窗,需要的朋友可以参考下 2017-09-09 AngularJS基础 ng-open 指令简单实例 本文主要介绍AngularJS ng-open 指令,这里帮大家整理了ng-open指令的基本资料,有需要的小伙伴可以参考下 2016-08-08 最新评论

本文实例讲述了AngularJS指令与控制器之间的交互功能。分享给大家供大家参考,具体如下:

本节我们来看控制器与指令之间的交互

1.首先来看最简单的,在指令中调用父控制器的方法:

<div ng-controller="myController1">
</div>

app.controller('myController1',['$scope',function($scope){
    $scope.load=function(){
     console.log('正在加载数据......');
    }
}]);
app.directive('myTest',function(){
    return{
      restrict:'E',
      link:function(scope,ele,attr){
        ele.bind('mouseenter',function(){
          scope.load();
        })
      }
    }
})

在第一节中,我们已经知道了如何在指令的scope参数中调用父控制器中的方法,这里的:

scope.load();

也可以写成:

scope.$apply('load()');

2.同一个指令,在动态调用多个父类控制器中的方法:

<div ng-controller="myController1" loadMore="load1()"</div>
<div ng-controller="myController2" loadMore="load2()"></div>

app.controller('myController1',['$scope',function($scope){
    $scope.load1=function(){
     console.log('正在加载数据......');
    }
}]);
app.controller('myController2',['$scope',function($scope){
    $scope.load2=function(){
    console.log('正在加载数据........');
    }
}]);
app.directive('myTest',function(){
    return{
      restrict:'E',
      link:function(scope,ele,attr){
        ele.bind('mouseenter',function(){
          scope.$apply(attr.loadmore())
        })
      }
    }
})

注意这里:

scope.$apply(attr.loadmore());

loadmore是小写,而在html中,属性是通过驼峰法则得到的。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

您可能感兴趣的文章:

  • AngularJS控制器controller正确的通信的方法
  • 详解AngularJS控制器的使用
  • AngularJS控制器之间的数据共享及通信详解
  • AngularJS控制器之间的通信方式详解
  • AngularJS控制器controller给模型数据赋初始值的方法
  • AngularJS实现自定义指令与控制器数据交互的方法示例
  • AngularJS开发教程之控制器之间的通信方法分析
  • AngularJS中一般函数参数传递用法分析
  • Angularjs中如何使用filterFilter函数过滤
  • angularjs指令中的compile与link函数详解
  • AngularJS中控制器函数的定义与使用方法示例
张贴在3